相关疑难解决方法(0)

我找到了这个主题 - 如何在保持图像宽高比的同时拉伸图像以填充<div>？ - 这不完全是我想要的东西.

我有一个特定大小的div和里面的图像.无论图像是横向还是纵向,我都希望始终用图像填充div.如果图像被切断(div本身隐藏了溢出)并不重要.

因此,如果图像是肖像我希望它width是100%,height:auto所以它保持成比例.如果图像是风景我想要的height是100%和width to beauto`.听起来很复杂吧？

<div class="container">
   <img src="some-image.jpg" alt="Could be portrait or landscape"/>
</div>

由于我不知道该怎么做,我只是简单地创建了我的意思的快速图像.我甚至无法正确描述它.

所以,我想我不是第一个问这个的人.但是我无法真正找到解决方案.也许有一些新的CSS3方式这样做 - 我想的是flex-box.任何的想法？也许它比我预期的要容易得多？

我的页面上有一个图像,我希望保持比例,但根据屏幕大小调整大小.我希望它能使较小的宽度和高度完全适合元素,并且较大的尺寸会溢出元素.

我找到了

object-fit: cover; 

风格适合我的需要,但很快发现对此的支持非常有限(几乎只有歌剧).还有什么我可以用来实现这个目标吗？

提前谢谢了 :)