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

Posted 2023-03-06

【中文标题】Internet Explorer中的图像缩放使图像被宽度按下

【英文标题】：Image scaling in internet explorer makes image get pressed by width

【发布时间】：2018-11-18 06:02:57

【问题描述】：

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

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

【参考方案1】：

改变这个

height: 100%;

到这里：

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

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

【讨论】：

谢谢你，但我现在发现，如果我将浏览器缩小，宽度就会成为问题。

将宽度更改为 min-width:100% :)

现在只剩下一件事，那就是保持图像居中：P

添加边距：自动