CSS 缩放多个图像以适应视口并保持纵横比
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23110412/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS scale several images to fit viewport keeping aspect ratio
提问by MindOverflow
I'm creating a gallery where I want to list all images from an album on one page : Big Picture style:
我正在创建一个画廊，我想在一个页面上列出相册中的所有图像：大图片样式：
Unlike Big Picture, I want the images to proportionally scaleto fit to the width of the container div(.section-images, which is set to margin: auto 2em;so its width is the width of the user's browser minus 2*2em) as much as possible without making them larger than 90% height of the viewport.
与大图片不同，我希望图像尽可能按比例缩放以适应容器的宽度div（.section-images设置为，margin: auto 2em;因此其宽度是用户浏览器的宽度减去2*2em），而不会使它们大于 90% 的高度视口。
As you imagine, a 400x600portrait photo when scaled to fit the width would be so long the user would not see the whole image on screen, thats why I need to limit width scaling to not exceed 90% height.
正如您想象的那样，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>
Under each image I have the .image-description, the height of this will vary.
在我拥有的每个图像下.image-description，它的高度会有所不同。
What is important is that at any one time a single image (so .image-large) should fit in the viewport, regardless of whether it is landscape or portrait.
重要的是，在任何时候.image-large，无论是横向还是纵向，单个图像（so ）都应该适合视口。
I would like to do this using only CSSif possible, and only javascript if CSS is not possible.
如果可能，我想仅使用CSS来执行此操作，如果无法使用CSS，则仅使用 javascript。
回答by web-tiki
Solution :(I stripped most of your containers to make it simple to understand and work with)
解决方案：（我删除了您的大部分容器以使其易于理解和使用）
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>Explanation :
解释 ：
This solution is based on the fact that percentages sizes (width and height) are relative the size of the parent element.
此解决方案基于百分比大小（宽度和高度）与父元素的大小相关的事实。
Considering .section-imagesis a direct child of <body>start by setting :
考虑.section-images是<body>通过设置开始的直接孩子：
html, body, .section-images {
width:100%;
height:100%;
margin:0;
}
So the direct parentof the images equals viewport size.
所以图像的直接父级等于viewport size。
Then, you can size your images easily using :
然后，您可以使用以下方法轻松调整图像大小：
img{
width:auto;
height:auto;
max-width:100%;
max-height:90%;
}
Images will never exceed100% width and 90% height of viewport while keeping their aspect ratio. And they will stay in the flow of the document.
图像永远不会超过视口的 100% 宽度和 90% 高度，同时保持其纵横比。他们将留在文档流中。
回答by DonutReply
You can also use viewport units to do this without changing html, bodyfor IE9+.
您还可以使用视口单位来执行此操作，而无需html, body针对 IE9+进行更改。
img {
width:auto;
height:auto;
max-width:100%;
max-height:90vh;
}
回答by Nick Salloum
Set the height of the container section-imagesexplicitly, and set its overflowto hidden.
section-images明确设置容器的高度，并将其设置overflow为hidden。
