CSS 如何缩放图像以适合容器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30595321/
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
How to scale image to fit the container?
提问by Sato
I have an image list, I want images scaled into their containers which have same size. like this:
我有一个图像列表，我希望将图像缩放到具有相同大小的容器中。像这样：
I created a jsfiddle
我创建了一个jsfiddle
<div class="container">
<div class="row">
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://exmoorpet.com/wp-content/uploads/2012/08/cat.png">
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://www.nose2tail.co.uk/cat-matlock-derbyshire.jpg">
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://www.us.onsior.com/images/3_1/cat-3_1-01.png">
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="https://www.petfinder.com/wp-content/uploads/2012/11/155293403-cat-adoption-checklist-632x475-e1354290788940.jpg" >
</a>
</div>
</div>
</div>
How can I do that? And in my example, I defined height: 100px;, this leads to not responsive, if I resize the browser, the div's height remain unchanged. If possible, I want this image list responsive.
我怎样才能做到这一点？在我的例子中，我定义了 height: 100px;，这会导致没有响应，如果我调整浏览器的大小，div 的高度保持不变。如果可能，我希望此图像列表具有响应性。
回答by LinkinTED
Change the heightand widthto max-heightand max-width. The image won't be any bigger than it's parent.
将height和更改width为max-height和max-width。图像不会比它的父级大。
.thumbnail img {
max-height: 100%;
max-width: 100%;
}
回答by Coding Enthusiast
.thumbnail {
height: 100px;
display: table;
}
.thumbnail img {
height: 100%;
width: 100%;
display: table-cell;
vertical-align: middle;
}
回答by raisercostin
In 2017 you can use flex. Additionally you will get the images centered in the thumbnail container: updated fiddle
在 2017 年，您可以使用 flex。此外，您将获得缩略图容器中居中的图像：更新的小提琴
.thumbnail {
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: solid 1px blue;
}
.thumbnail img {
max-width: 100%;
max-height: 100%;
display: block;
margin: 0 auto;
border: solid 1px red;
}
回答by m4lt3
This should help, at least for your example. There might be some cases in which this will not work. In that case you have to find a js solution.
这应该会有所帮助，至少对于您的示例而言。在某些情况下，这可能不起作用。在这种情况下，您必须找到一个 js 解决方案。
.thumbnail img {
height: 100%;
width: auto;
}
回答by Danish Khan
.thumbnail img {
height: 100%;
width: 100%;
}
Use this.
用这个。
回答by Mr_vasu
.thumbnail {
height: 100%;
}
.thumbnail img {
max-height: 100%;
max-width: 100%;
border: 1px solid red;
}
回答by ZZ-bb
(I'll add an answer although this is a old question. I had the same issue until I added the class thumbnailto the image link and looked a little bit deeper. No added css was necessary.)
（虽然这是一个老问题，但我会添加一个答案。我遇到了同样的问题，直到我将类添加thumbnail到图像链接并看起来更深一些。不需要添加 css。）
Maybe something is changed. In Bootstrap 3.3.7. there is this (non-minified css, line 5019):
也许有什么改变了。在 Bootstrap 3.3.7 中。有这个（非缩小的 css，第 5019 行）：
.thumbnail > img,
.thumbnail a > img {
margin-left: auto;
margin-right: auto;
}
And this (non-minified css, line 1124):
而这个（非缩小的 css，第 1124 行）：
.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
display: block;
max-width: 100%;
height: auto;
}
So everything should work right out of the box if you have added the class thumbnailto the image link. (You need to remove both of those and things will break.) And it works with or without the added css:
因此，如果您已将该类添加thumbnail到图像链接中，那么一切都应该可以立即使用。（您需要删除这两个，否则事情会中断。）无论是否添加了 css，它都可以工作：
.thumbnail img {
max-height: 100%;
max-width: 100%;
}
The added css overrides Bootstraps styles, at least for me since the added style is included after the Bootstraps own styles. (But it is redundant.)
添加的 css 覆盖 Bootstraps 样式，至少对我来说是因为添加的样式包含在 Bootstraps 自己的样式之后。（但它是多余的。）
