Question

我正在创建一个图库，我想在一个页面上列出相册中的所有图片：Big Picture style：

与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，其高度会有所不同。

重要的是，任何时候单个图像（.image-large）都应该适合视口，无论它是横向还是纵向。

如果可能，我想使用 only CSS 执行此操作，如果无法使用CSS，则仅使用javascript。

Answer 1

解决方案： （我剥离了大部分容器，使其易于理解和使用）

html,
body,
.section-images {
  height: 100%;
  margin: 0;
}
.section-images {
  margin: auto 2em;
  text-align: center;
}
img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 90%;
  margin: 20px auto;
}

<section class="section-images">
  <a href="#"><img src="http://i.imgur.com/hMRnvUx.jpg" /></a>
  <div class="image-description">blabla3<br/>more blablah<br/>and more blablah</div>
  <a href="#"><img src="http://i.imgur.com/lBuIEDh.jpg" /></a>
  <div class="image-description">blabla2</div>
  <a href="#"><img src="http://i.imgur.com/k8BtMvj.jpgg" /></a>
  <div class="image-description">blabla3<br/>more blablah<br/>and more blablah</div>
</section>

说明：

此解决方案基于以下事实：百分比大小（宽度和高度）相对于父元素的大小。

考虑.section-images是<body>的直接孩子，首先要设置：

html, body, .section-images {
    width:100%;
    height:100%;
    margin:0;
}

因此图片的直接父等于视口大小。

然后，您可以使用以下方法轻松调整图像大小：

img{
    width:auto;
    height:auto;
    max-width:100%;
    max-height:90%;
}

图像永不超过 100％宽度和90％视口高度，同时保持宽高比。他们将留在文件的流程中。

Answer 2

您也可以使用视口单元执行此操作，而无需更改IE9 +的html, body。

img {
    width:auto;
    height:auto;
    max-width:100%;
    max-height:90vh;
}

Answer 3

明确设置容器section-images的高度，并将其overflow设置为hidden。

CSS缩放多个图像以适合保持纵横比的视口

3 个答案: