小编Min*_*low的帖子

我正在创建一个图库,我想在一个页面上列出相册中的所有图像:大图片样式:

与Big Picture不同,我希望图像按比例缩放以适应容器的宽度div(.section-images设置为margin: auto 2em;宽度是用户浏览器的宽度减去2*2em)尽可能不使它们大于90%的高度视口.

正如您想象的那样,400x600缩放以适应宽度的肖像照片将会很长,用户将无法在屏幕上看到整个图像,这就是为什么我需要将宽度缩放限制为不超过90%的高度.

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

在我拥有的每张图片下.image-description,这个高度会有所不同.

重要的是,在任何时候,单个图像(so .image-large)应该适合视口,无论它是横向还是纵向.

如果可能的话我想只用CSS做这个,如果CSS不可能只用javascript.