CSS 如何在保持比例的同时用图像填充 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14142378/
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 can I fill a div with an image while keeping it proportional?
提问by matt
I found this thread — How do you stretch an image to fill a <div> while keeping the image's aspect-ratio?— that is not entirely the thing that I want.
我找到了这个线程 —如何在保持图像的纵横比的同时拉伸图像以填充 <div>？——这不完全是我想要的。
I have a div with a certain size and an image inside of it. I want to alwaysfill-out the div with the image regardless if the image is landscape or portrait. And it doesn't matter if the image is cut-off (the div itself has overflow hidden).
我有一个特定大小的 div，里面有一个图像。无论图像是横向还是纵向，我都想始终用图像填充 div。并且图像是否被截断也没有关系（div 本身已隐藏溢出）。
So if the image is portrait I want the widthto be 100%and the height:autoso it stays in proportion. If the image is landscape I want the heightto be 100%and the width to beauto`. Sounds complicated right?
因此，如果图像是人像我想要的width是100%和height:auto，使其保持在比例。如果图像是风景，我希望height是100%和width to be自动`。听起来很复杂吧？
<div class="container">
<img src="some-image.jpg" alt="Could be portrait or landscape"/>
</div>
Since I don't know how to do it I simply created a quick image of what I mean. I can't even properly describe it.
因为我不知道该怎么做，所以我只是简单地创建了一个我的意思的快速图像。我什至无法正确描述它。
So, I guess I'm not the first one asking this. However I couldn't really find a solution to this. Maybe there is some new CSS3 way of doing this - I'm thinking of flex-box. Any idea? Maybe it's even easier than I expect it to be?
所以，我想我不是第一个问这个的人。但是，我无法真正找到解决方案。也许有一些新的 CSS3 方法可以做到这一点 - 我在考虑 flex-box。任何的想法？也许它比我预期的更容易？
回答by Isius
If I correctly understand what you want, you may leave the width and height attributes off the image to maintain aspect ratio and use flexbox to do the centering for you.
如果我正确理解您想要什么，您可以将宽度和高度属性保留在图像之外以保持纵横比并使用 flexbox 为您进行居中。
.fill {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden
}
.fill img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%
}<div class="fill">
<img src="https://lorempizza.com/320/240" alt="" />
</div>I tested this successfully in IE9, Chrome 31, and Opera 18. But no other browsers were tested. As always you must consider your particular support requirements.
我在 IE9、Chrome 31 和 Opera 18 中成功测试了这一点。但没有测试其他浏览器。与往常一样，您必须考虑您的特定支持要求。
回答by Hermilton
It's a bit late but I just had the same problem and finally solved it with the help of another stackoverflow post (https://stackoverflow.com/a/29103071).
有点晚了，但我遇到了同样的问题，最终在另一个 stackoverflow 帖子（https://stackoverflow.com/a/29103071）的帮助下解决了它。
.img {
object-fit: cover;
width: 50px;
height: 100px;
}
Hope this still helps somebody.
希望这仍然可以帮助某人。
Ps: Also works together with max-height, max-width, min-widthand min-heightcss properties. It's espacially handy with using lenght units like 100%or 100vh/100vwto fill the container or the whole browser window.
Ps：还可以与max-height、max-width、min-width和min-heightcss 属性一起使用。使用100%或100vh/ 100vw等长度单位填充容器或整个浏览器窗口非常方便。
回答by holist
An old question but deserves an update as now there is a way.
一个老问题，但值得更新，因为现在有一种方法。
The correct CSS based answer is to use object-fit: cover, which works like background-size: cover. Positioning would be taken care of by object-positionattribute, which defaults to centering.
正确的基于 CSS 的答案是使用object-fit: cover，其工作原理类似于background-size: cover. 定位将按object-position属性处理，默认为居中。
Butthere is no support for it in any IE / Edge browsers, or Android < 4.4.4. Also, object-positionis not supported by Safari, iOS or OSX. Polyfills do exist, object-fit-imagesseems to give best support.
但是任何 IE/Edge 浏览器或 Android < 4.4.4 都不支持它。此外，object-positionSafari、iOS 或 OSX 不支持。Polyfill 确实存在，object-fit-images似乎提供了最好的支持。
For more details on how the property works, see CSS Tricks article on object-fitfor explanation and demo.
有关该属性如何工作的更多详细信息，请参阅CSS Tricks 文章中object-fit的解释和演示。
回答by maksim1
This should do it:
这应该这样做：
img {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
回答by Artur Klassen
All answers below have fixed width and height, which makes solution "not responsive".
下面的所有答案都有固定的宽度和高度，这使得解决方案“没有响应”。
To achieve the result but keep image responsive I used following:
为了实现结果但保持图像响应，我使用了以下内容：
- Inside container place a transparent gif image with desired proportion
- Give an image tag inline css background with image you want to resize and crop
- 在容器内放置一个具有所需比例的透明 gif 图像
- 使用要调整大小和裁剪的图像提供图像标记内联 css 背景
HTML:
HTML：
<div class="container">
<img style="background-image: url("https://i.imgur.com/XOmNCwY.jpg");" src="img/blank.gif">
</div>
.container img{
width: 100%;
height: auto;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}?
回答by Sandeep K Nair
You can achieve this using css flex properties. Please see the code below
您可以使用 css flex 属性来实现这一点。请看下面的代码
.img-container {
width: 150px;
height: 150px;
border: 2px solid red;
justify-content: center;
display: flex;
flex-direction: row;
overflow: hidden;
}
.img-container .img-to-fit {
flex: 1;
height: 100%;
}<div class="img-container">
<img class="img-to-fit" src="https://images.pexels.com/photos/8633/nature-tree-green-pine.jpg" />
</div>回答by Marat Tanalin
Consider using background-size: cover(IE9+) in conjunction with background-image. For IE8-, there is a polyfill.
考虑将background-size: cover(IE9+) 与background-image. 对于IE8-，还有填充工具。
回答by Landerqvist
Try this:
尝试这个：
img {
position: relative;
left: 50%;
min-width: 100%;
min-height: 100%;
transform: translateX(-50%);
}
Hope this helps
希望这可以帮助
回答by Sivasakthivel Kalaiarasu
You can use div to achieve this. without img tag :) hope this helps.
您可以使用 div 来实现这一点。没有 img 标签 :) 希望这会有所帮助。
.img{
width:100px;
height:100px;
background-image:url('http://www.mandalas.com/mandala/htdocs/images/Lrg_image_Pages/Flowers/Large_Orange_Lotus_8.jpg');
background-repeat:no-repeat;
background-position:center center;
border:1px solid red;
background-size:cover;
}
.img1{
width:100px;
height:100px;
background-image:url('https://images.freeimages.com/images/large-previews/9a4/large-pumpkin-1387927.jpg');
background-repeat:no-repeat;
background-position:center center;
border:1px solid red;
background-size:cover;
}<div class="img">
</div>
<div class="img1">
</div>回答by David Schumann
The only way I achieved the "best case" scenario described, was putting the image as a background:
我实现所描述的“最佳情况”场景的唯一方法是将图像作为背景：
<div class="container"></div>?
.container {
width: 150px;
height: 100px;
background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}?
