CSS met à l'échelle plusieurs images pour s'adapter à la taille de la fenêtre
Je suis de la création d'une galerie où je veux la liste de toutes les images d'un album sur une page : Big Picture style :
À la différence de la Grande Image, je veux que les images proportionnellement à l'échelle pour s'adapter à la largeur du conteneur div
(.section-images
qui est fixé à margin: auto 2em;
si sa largeur est la largeur du navigateur de l'utilisateur moins 2*2em
) autant que possible, sans les rendre de plus de 90% de la hauteur de la fenêtre d'affichage.
Comme vous l'imaginez, un 400x600
portrait photo lors de la mise à l'échelle pour s'adapter à la largeur serait tellement longtemps que l'utilisateur ne voit pas la totalité de l'image sur l'écran, c'est pourquoi j'ai besoin de limiter la largeur de mise à l'échelle afin de ne pas dépasser 90% de la hauteur.
<section class="section-images">
<div class="image-box">
<div class="image-large">
<a href="#"><img foo1></a>
</div>
<div class="image-description">
blabla1
</div>
... MORE IMAGES WITH DESCRIPTONS ...
</div>
etc
</section>
Sous chaque image j'ai l' .image-description
la hauteur de ce varient.
Ce qui est important, c'est que, à tout moment, une seule image (donc .image-large
) doit tenir dans la fenêtre d'affichage, indépendamment de savoir si il est en mode paysage ou portrait.
Je voudrais le faire à l'aide de seulement CSS si possible, et javascript seulement si le CSS n'est pas possible.
source d'informationauteur MindOverflow
Vous devez vous connecter pour publier un commentaire.
Vous pouvez également utiliser la fenêtre d'affichage unités pour ce faire, sans changer
html, body
pour IE9+.Régler la hauteur du conteneur
section-images
explicitement, et de définir saoverflow
àhidden
.