使用 img max-width: 100% 在 Chrome 中使用浏览器窗口自动调整图像大小，但在父 div 具有位置时不能在 IE 中使用：absolute

Posted 2023-03-06

技术标签:

【中文标题】使用 img max-width: 100% 在 Chrome 中使用浏览器窗口自动调整图像大小，但在父 div 具有位置时不能在 IE 中使用：absolute【英文标题】：Auto Image resize with broswer window using img max-width: 100% works in Chrome but not IE when parent div has position: absolute 【发布时间】：2014-01-01 20:53:32 【问题描述】：

我正在构建一个响应式网站，我发现使用 img max-width:100% 调整浏览器窗口大小的自动图像大小在 Chrome 中有效，但在任何父级或祖先有 position:absolute 时不适用于 IE 和 Firefox；

（有关此技术的信息，请参阅 http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries )

以下代码可用于演示或重现此问题。你也可以在http://sketchmotion.com/image-test2/ 看到这个。您会注意到，调整浏览器窗口的大小将调整 Chrome 中的图像大小，而不是 IE（我正在运行 IE 11）。但是，如果您删除以下行：

    .mydiv
        position: absolute;

您会发现它现在可以在 Chrome 和 IE 中使用。

这没有帮助，因为我使用的是 position: absolute;在我网站上的一些父 div 上。而且我需要我的网站在 IE 和 Firefox 中运行。

如果有解决此问题的方法，请告诉我，以便我可以使用我网站上的浏览器窗口调整图像大小。

<html>
<head>

    <!--  <link href="/cssh/ImageTest.css" rel="stylesheet" type="text/css"></link>  -->

    <style type="text/css">

        .mydiv
            position: absolute;  
        

        img
        /***  Scaling Images with the Browser Window in CSS is pretty simple to implement for both images and video.  ***/
        /***  You can set the media element’s max-width to 100 percent, and the browser will make    ***/
        /***  the image shrink and expand depending on its container.    ***/
        /***  To maintain the right proportions use auto height  ***/
        max-width: 100%;
        height: auto; 
        width: auto\9; /* ie8 */
        

</style>



</head>

<body>  


<!--    -->
    <div class="mydiv"> 
    <div class="slides">    
    <div class="slide"> 
        <img     src="http://sketchmotion.com/ImagesSM/SM_Slider_1_SketchMotion_w_Sketch.jpg" />
    </div>  
    </div>    
    </div>   



</body>
</html>

【问题讨论】：

【参考方案1】：

对于在 IE 上工作的响应。不要在<table> 中包含图片。只需使用 <div> 并使用 CSS：

img 
    max-width: 100%;
    height: auto;
    width: auto\9;

【讨论】：

【参考方案2】：

我确认使用 width: 100%;对于父级和所有祖先 div 使其在 IE 中工作。但是，这有点痛苦，因为这通常不是您想要做的。 Chrome 没有这种限制，并且会缩放图像，无论哪种方法看起来更明智和一致，恕我直言。

再次感谢特里·克兰西

【讨论】：

【参考方案3】：

试试这个：

.mydiv 
    position: absolute;
    width: 100%;

我没有确切解释为什么，但这有效。 :)

【讨论】：

@user3101077 Terry Clancy - 如果此答案解决了您的问题或对您有帮助，请接受它作为答案或投赞成票。谢谢。

以上是关于使用 img max-width: 100% 在 Chrome 中使用浏览器窗口自动调整图像大小，但在父 div 具有位置时不能在 IE 中使用：absolute的主要内容，如果未能解决你的问题，请参考以下文章

手机Web 开发中图片img 如何等比例缩放