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-imagesqui 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-descriptionla 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