Html 将图像放入 div 内而不拉伸
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8775149/
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
Fit image inside div without stretching
提问by Hyman Stewart
I need to fit an image inside a 300x300 div without stretching the image. I've seen this on the huff post, the slider on this page :
我需要在不拉伸图像的情况下将图像放入 300x300 div 中。我在愤怒的帖子上看到过这个，这个页面上的滑块：
http://www.huffingtonpost.com/2012/01/07/katy-perry-divorce_n_1191806.html
http://www.huffingtonpost.com/2012/01/07/katy-perry-divorce_n_1191806.html
The images are clipped but not stretched. Instead of using max-width, max-height.
图像被剪裁但未拉伸。而不是使用最大宽度，最大高度。
How do I do this?
我该怎么做呢？
回答by Wesley Murch
Those images on the site you linked to are actual size, so the simple answer is just to resize the image.
您链接到的网站上的那些图像是实际大小，因此简单的答案就是调整图像大小。
You can't really do this without "stretching" the image if the image happens to be less than 300px wide or tall, but you can do it without changing the ratio, which is what I think you mean.
如果图像的宽度或高度恰好小于 300 像素，则您无法在不“拉伸”图像的情况下真正做到这一点，但是您可以在不更改比例的情况下做到这一点，这就是我认为您的意思。
Here's the basic idea:
这是基本思想：
<div><img></div>
If you want to use 300px as a minimum width (you expect small images that need to be bigger), try this:
如果您想使用 300px 作为最小宽度（您希望小图像需要更大），请尝试以下操作：
div {
width:300px;
height:300px;
overflow:hidden;
}
div img {
min-width:100%;
}
Demo: http://jsfiddle.net/Z47JT/
演示：http: //jsfiddle.net/Z47JT/
If you want to clip images (because you expect them to be big) but not enlarge them, try this:
如果您想剪辑图像（因为您希望它们很大）但不想放大它们，请尝试以下操作：
div {
width:300px;
height:300px;
overflow:hidden;
position:relative;
}
div img {
position:absolute;
}
Demo: http://jsfiddle.net/Z47JT/1/
演示：http: //jsfiddle.net/Z47JT/1/
Combine both these techniques if you want.
如果你愿意，可以结合这两种技术。
Another way is to simply use background-imageon the container instead, but resizing it (if you want to stretch smaller images) will be difficult unless you use background-sizewhich isn't fully supported. Otherwise, it's a great easy solution.
另一种方法是简单地background-image在容器上使用，但调整它的大小（如果您想拉伸较小的图像）将很困难，除非您使用background-size它不受完全支持。否则，这是一个非常简单的解决方案。
回答by jaseelmp
Use the flex box solution
使用弹性盒解决方案
Here is the html,
这是html，
<div><img /></div>
Add styles
添加样式
div{
width:100%;
height:250px;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden
}
div img{
flex-shrink:0;
-webkit-flex-shrink: 0;
max-width:70%;
max-height:90%;
}
回答by Optimaz ID
simple way to do this....
做到这一点的简单方法......
.div {
background-image: url(../images/your-image.png);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}
}
