html - Internet Explorer中的图像缩放使图像被宽度按下

Question

我正在努力在我的班级内创建一个后备图像来创建响应式图像，但我一直在努力解决 IE 的问题。因为我不能使用 , 之类的东西<source>，object-fit所以srcset我面临着挑战。图像放置在内容下方，因此它的大小将与 div 内容的高度一致。图像应该覆盖包含内容的 div 的整个背景，但问题是宽度将图像压到这个看起来很糟糕的紧凑尺寸：

我将为您提供一个 jsfiddle：https ://jsfiddle.net/6Lxwesvf/7/ 。我制作了一个包装器的副本，它的功能与它在 IE 中的功能完全相同。所以我希望有人知道如何让图像看起来不会被宽度压住。

标签： htmlcssimageinternet-explorer

Answer 1

改变这个

height: 100%;

对此：

min-height: 100%;
min-width: 100%;
margin: auto;

工作笔：https ://codepen.io/sidhanshu28/pen/ERNwxz