我知道这个问题不是新的…但我认为也许与新的CSS3技术可能有解决方案。我发现这个线程 –
How do you stretch an image to fill a <div> while keeping the image’s aspect-ratio? – 这不是完全是我想要的东西。
我有一个大小和一个图像里面的div。我想总是用图像填充div，无论图像是横向还是纵向。如果图像是截止的(div本身有溢出隐藏)没有关系。
所以如果图像是人像我想要的宽度是100％和高度：自动所以它保持比例。如果图像是风景，我想要的高度是100％，宽度为beauto。听起来很复杂吗？
<div class="container"> <img src="some-image.jpg" alt="Could be portrait or landscape"/> </div>
因为我不知道该怎么做，我只是简单地创造了一个我的意思的快速形象。我甚至不能正确地描述它。
所以，我想我不是第一个问这个。然而，我真的找不到一个解决方案。也许有一些新的CSS3方式这样做 – 我在想flex-Box。任何想法？也许它比我预期更容易吗？
先谢谢你。
解决方法
如果我正确理解你想要什么，你可以保留宽度和高度属性关闭图像以保持宽高比，并使用flexBox做你的中心。
HTML
<div class="fill">
<img ...>
</div>
CSS
.fill {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden
}
.fill img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%
}
我在IE9，Chrome 31和Opera 18中成功测试了这一点。但没有其他浏览器被测试。一如既往，您必须考虑您的特定支持要求。
