CSS：在保持比例的同时用图像填充div
我知道这个问题不是新的，但是我想也许用新的CSS3技术可能会有解决scheme。 我发现这个线程 – 如何拉伸图像填充<div>，同时保持图像的纵横比？ – 这不完全是我想要的东西。
我有一个特定大小的div，里面有一个图片。 无论图像是风景还是肖像，我都希望始终用图像填满div。 如果图像被切断（div本身已经隐藏了溢出），这并不重要。
所以如果图像是肖像，我想width为100% ， height:auto所以它保持成比例。 如果图像是风景，我想height为100% ， width to be自动。 听起来很复杂吗？
<div class="container"> <img src="some-image.jpg" alt="Could be portrait or landscape"/> </div>
因为我不知道该怎么做，所以我简单地创build了一个我的意思的快速图像。 我甚至不能正确地描述它。
所以，我想我不是第一个问这个问题的。 但是我真的找不到解决办法。 也许有一些新的CSS3方法 – 我正在考虑弹性框。 任何想法？ 也许这比我预期的更容易？
先谢谢你。
如果我正确地理解你想要什么，你可以离开图像的宽度和高度属性，以保持宽高比，并使用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% }
jsFiddle在这里
我在IE9，Chrome 31和Opera 18上成功testing了这个function。但是没有其他的浏览器被testing过。 一如既往，您必须考虑您的特定支持要求。
这有点晚，但我只是有同样的问题，并最终解决了另一个stackoverflowpost（ https://stackoverflow.com/a/29103071 ）的帮助。
.img { object-fit: cover; width: 50px; height: 100px; }
希望这仍然有助于某人。
Ps：也可以与最大高度 ， 最大宽度 ， 最小宽度和最小高度 CSS属性一起使用。 使用100％或100vh / 100vw等长度单位填充容器或整个浏览器窗口非常方便。
一个古老的问题，但值得更新，因为现在有一种方法。
正确的基于CSS的答案是使用object-fit: cover ，它的工作方式与background-size: cover 。 定位将由object-position属性来处理，该属性默认为居中。
但在任何IE / Edge浏览器或Android <4.4.4中都不支持。 此外，Safari，iOS或OSX不支持object-position 。 Polyfills确实存在， 物体贴合图像似乎给予了最好的支持。
有关该属性如何工作的更多详细信息，请参阅有关object-fit的解释和演示的CSS技巧文章 。
考虑使用background-size: cover （IE9 +）和background-image 。 对于IE8-，有一个polyfill。
这应该做到这一点：
img { min-width: 100%; min-height: 100%; width: auto; height: auto; }
不，没有一个CSS3的解决scheme。 但是，您所链接的问题的最佳答案是第二好的。
在这里你有我的工作的例子。 我已经使用了一个把background-size：cover和background-position：center center设置为div容器背景的技巧
我已经放置了图像的宽度：100％，不透明度：0使其不可见。 请注意，我只显示我的图片是因为我对调用子点击事件有特别的兴趣。
请注意，我这样做是完全不相干的。
<div class="foto-item" ng-style="{'background-image':'url('+foto.path+')'}"> <img class="materialboxed" ng-class="foto.picid" ng-src="{{foto.path}}" style="opacity: 0;filter: alpha(opacity=0);" width="100%" onclick="$('.materialboxed')/> </div> <style> .foto-item { height: 75% !important; width: 100%; position: absolute; top: 0; left: 0; overflow:hidden; background-size: cover; background-position: center center; } </style>
结果是你在所有情况下定义为最优的那个
尝试这个：
img { position: relative; left: 50%; min-width: 100%; min-height: 100%; transform: translateX(-50%); }
希望这可以帮助
