CSS:在保持比例的同时用图像填充div

我知道这个问题不是新的,但是我想也许用新的CSS3技术可能会有解决scheme。 我发现这个线程 – 如何拉伸图像填充<div>,同时保持图像的纵横比? – 这不完全是我想要的东西。

我有一个特定大小的div,里面有一个图片。 无论图像是风景还是肖像,我都希望始终用图像填满div。 如果图像被切断(div本身已经隐藏了溢出),这并不重要。

所以如果图像是肖像,我想width100%height:auto所以它保持成比例。 如果图像是风景,我想height100%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%); } 

希望这可以帮助