Html 如何使用css缩放图像以填充保持纵横比的div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31943618/
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 an image with css to fill a div keeping aspect ratio?
提问by membersound
I'd like to fill a div with an img, keeping aspect ratio and stretching either width or height as much as required to fit in.
我想用 填充一个 div img，保持纵横比并根据需要拉伸宽度或高度以适应。
<div style="width: 80px; height: 80px">
<img src="..." />
</div>
How could I achieve it? If the image is not quadratic, it must be "zoomed in" and either be scropped top-bottom or left-right, depending which side is the bigger one. Moreover the image should afterwards be centered, so that the corners get cut equally.
我怎么能做到呢？如果图像不是二次方的，则必须“放大”并从上到下或从左到右裁剪，具体取决于哪一侧较大。此外，图像之后应该居中，以便角落被平均切割。
I tried (but no effect):
我试过（但没有效果）：
.thumb {
max-width:100%;
max-height:100%;
}
If I add additional width: 100%; height:100%;, the images fit perfectly, but are resized not keeping aspect ratio.
如果我添加额外的width: 100%; height:100%;，图像完美契合，但会调整大小而不保留aspect ratio.
回答by membersound
the following did the trick:
以下是诀窍：
width:100%;
height:100%;
object-fit: cover;
overflow: hidden;
回答by cdMinix
Using max-width, the image will be contained inside the div, there will be no overflow.
使用max-width，图像将包含在 div 中，不会溢出。
If you use min-widthinstead, the shorter side will be exactly 100% of the div while the other side can be longer.
To center the image, we can use translate and relative positioning.
如果您min-width改为使用，较短的一侧将恰好是 div 的 100%，而另一侧可能更长。为了使图像居中，我们可以使用translate 和 relative 定位。
The following code works.
以下代码有效。
div {
overflow: hidden;
}
.thumb {
min-width: 100%;
min-height: 100%;
transform: translate(-50%, -50%);
position: relative;
left: 50%;
top: 50%;
}
回答by Greg
To keep an image's aspect ratio, just specify one dimension:
要保持图像的纵横比，只需指定一个维度：
div {
width: 80px;
height: 80px;
border: 2px solid red;
overflow: hidden;
}
img {
height: 100%;
}
This will produce the following effect:
这将产生以下效果：
However, as you can see, the kitten is not central, but you can use Flex box to sort this out.
但是，正如您所看到的，小猫不是中心，但是您可以使用 Flex 框来解决这个问题。
div {
width: 80px;
height: 80px;
border: 2px solid red;
justify-content: center;
display: flex;
flex-direction: row;
}
img {
flex: 1;
height: 100%;
}
回答by Matt
.thumb {
max-width:100%;
height:auto;
}
Or ( to allow scale up and down, which will look pixelated if you scale up, where the above will only scale to the max size of the image )
或者（允许放大和缩小，如果放大，它看起来会像素化，上面只会缩放到图像的最大尺寸）
.thumb {
width:100%;
height:auto;
}
Is what you are looking for.
是你要找的。
More info on responsive images:
有关响应式图像的更多信息：
回答by MoLow
use background-size:cover
使用背景尺寸：封面
div{
background-image:url(http://placekitten.com.s3.amazonaws.com/homepage-samples/200/140.jpg);
background-size:cover;
}<div style="width:80px;height:80px;"></div>回答by PengTheEngineer
Not sure if anyone still looking at this post. I came across this while I was looking for a way to fit a image into a < div > without getting the unwanted white space around the image, because I was using hover & stick-out effect. I was inspired by Matt's solution. Instead of
不知道有没有人还在看这个帖子。我在寻找一种方法将图像放入 < div > 而不会在图像周围获得不需要的空白时遇到了这个问题，因为我使用了悬停和突出效果。我的灵感来自马特的解决方案。代替
.thumb {
max-width:100%;
height:auto;}
I added
我加了
.thumb {
max-width:100%;
max-height:100%;
height:auto;}
Now my images fit in to the < div > perfectly without having those white space stick out with the image.
现在我的图像完全适合 < div > ，而没有那些空白与图像突出。
