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

Question

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

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

Answer 1

改变这个

height: 100%;

为此:

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

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