我知道这个问题不是新的…但我认为也许与新的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中成功测试了这一点。但没有其他浏览器被测试。一如既往，您必须考虑您的特定支持要求。
