Internet Explorer 9 - 按比例调整图像大小

Posted 2023-03-06

【中文标题】Internet Explorer 9 - 按比例调整图像大小

【英文标题】：Internet Explorer 9 - Resize image proportionally

【发布时间】：2011-12-16 02:50:57

【问题描述】：

我正在尝试仅使用 CSS 来限制图像宽度：

#lateral-derecho #patrocinadores img

    max-width: 130px;
    height: auto;
    margin: 0 auto;

除了 IE 9 之外，每个浏览器都可以正常运行。它并没有按比例进行。我在<meta http-equiv="X-UA-Compatible" content="IE=8" /> 运行它。

顺便说一句，标准模式下的 IE 9 甚至不理解 margin: 0 auto; 还是我做错了什么？他们又做了一个糟糕的浏览器？

编辑：这是所有的 CSS、容器 (#patrocinadores) 和 img，img 包含在 #patrocinadores > a > img 中：

#lateral-derecho #patrocinadores

    float: right;
    width: 136px; 
    margin-top: 25px;
    padding: 15px 0 5px;
    background: url(images/top-patrocinadores.png) top no-repeat #eee;
    text-align: center;


#lateral-derecho #patrocinadores adisplay: block;
#lateral-derecho #patrocinadores img

    max-width: 130px;
    height: auto;
    margin: 0 auto;

【参考方案1】：

摆脱height: auto;。你不需要它，这就是问题的根源。

【讨论】：

不，实际上，如果我摆脱它，所有浏览器都会不按比例调整它的大小，IE9 也是如此，所以我需要它才能让真正的浏览器正常工作。谢谢

@user761076 不，那么您在其他地方有一些不正确的 css。如果您不告诉他们，为什么其他浏览器会设置高度？不。您在此图像上设置高度的地方，您不应该这样做。使用 firebug 找出位置并将其删除。

@user761076 嗯 - 您是否在图像标签中包含了高度？如果您要删除它（以及宽度）。不要在标签和css中都设置维度，这会导致奇怪的问题。

不，图片标签中没有高度，任何容器中都没有高度

【参考方案2】：

试试这个：

#lateral-derecho #patrocinadores a 
    display: block;
    max-width: 130px;

#lateral-derecho #patrocinadores img 
    max-width: 100%;

如果您想要 IE AlphaImageLoader 并将 sizingMethod 设置为 scale。

【讨论】：

谢谢，但也不起作用...您确定IE9不会在您的机器上执行此操作吗？ IE8 可以正常工作，但 IE9 不能...