Comment faire une image redimensionner les écrans de la hauteur avec CSS?
Contrairement à beaucoup de gens qui veulent une image pour remplir tout l'écran, je ne se soucient de la hauteur de l'image. Comment puis-je utiliser les CSS (de préférence pas JavasScript) pour faire une image avec n'importe quelle taille, le remplir jusqu'à 100% du maximum possible de la fenêtre du navigateur hauteur tout en gardant le ratio d'aspect de l'image, la redimensionner la largeur de l'image en ce qui concerne le navigateur n'a pas d'importance.
Je travaille avec ce code html:
<div class="images">
<img/>
</div>
Merci beaucoup!
OriginalL'auteur Mohammad | 2011-09-09
Vous devez vous connecter pour publier un commentaire.
ou si vous voulez être explicite
hauteur de 100%: http://jsfiddle.net/jmarikle/vz7q2bnk/
largeur de 100%: http://jsfiddle.net/jmarikle/vz7q2bnk/1/
EDIT:
Cette réponse, besoin d'une certaine attention. La démo a été brisé, et généralement un gâchis. J'ai mis à jour avec de nouvelles images, de mise à jour de la règle pour compenser la ligne de la nature des images, et normalisée de la hauteur et de la largeur du corps et des éléments html.
vos liens ne fonctionnent pas...
En fait il ressemble à jsfiddle pourrait être d'avoir des problèmes de serveur. Je suis un 500 erreur interne du serveur.
OriginalL'auteur Joseph Marikle
Vous pouvez également jeter un oeil à la vh, vw, vmin et vmax CSS unités qui sont assez bien pris en charge. Il y a un bon article décrivant la façon d'atteindre les 100% de la hauteur ici.
BTW – méfiez-vous de l'espace: ce qui peut ajouter un indésirable de la marge. Retrait de l'espace, l'ajout d'un flotteur, ou à l'aide de la
font-size: 0
hack sera régler cette question. Aussi, lors de l'utilisation d'autres méthodes, n'oubliez pas de réglerheight: 100%
pour le corps et les éléments html.OriginalL'auteur Sam Dutton
Cela peut-être exagéré:
Oui comme Joseph dit le haut ou le bas n'est pas vraiment nécessaire.
euh.. à partir de ce que j'ai vu dans ce, ce que vous avez vraiment besoin de faire est l'adresse de votre conteneur. Cette méthode élimine essentiellement l'élément du conteneur. essayez de faire vos images div
position:absolute;left:0;top:0;height:100%
.OriginalL'auteur Joe