自動圖像調整：在Chrome 100％的工程，但不是IE瀏覽器時，父div有位置：絕對

我建立一個負責任的網站，我發現，自動圖像使用帶有broswer窗口大小調整調整IMG最大寬度：100件％作品在Chrome，但不IE和Firefox當任何父級或上級具有的位置是：絕對的;自動圖像調整：在Chrome 100％的工程，但不是IE瀏覽器時，父div有位置：絕對

（有關此技術的信息，請參閱 http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries ）

以下代碼可用於演示或重現此問題。你也可以在http://sketchmotion.com/image-test2/看到這個。你會發現，調整瀏覽器窗口將調整在Chrome，但不是IE的圖像（我運行IE 11）。但是，如果刪除以下行：

.mydiv{ 
     position: absolute; 
    }

您會發現它現在可以在Chrome和IE中使用。

這是沒有幫助的，因爲我用我的位置是：絕對的;在我的網站上的一些父母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 alt="" src="http://sketchmotion.com/ImagesSM/SM_Slider_1_SketchMotion_w_Sketch.jpg" /> 
    </div> 
    </div>  
    </div> 



</body> 
</html>

來源

2013-12-13 user3101077

試試這個：

.mydiv { 
    position: absolute; 
    width: 100%; 
}

我沒有解釋到底爲什麼，但這個工程。 :)

來源

2013-12-13 23:19:35 MElliott

@ user3101077特里·克蘭西 - 如果這個答案解決您的問題，或者是有幫助的，請接受這個答案，或者投了它吧。謝謝。 – MElliott

我確認使用寬度：100％;爲父母和所有祖先div使它在IE中工作。然而，這有點痛苦，因爲這往往不是你想要做的。鉻沒有這種限制，並擴大形象，無論這似乎是一個更明智和一致的方法恕我直言。

再次感謝特里克蘭西

來源

2013-12-17 07:40:46 user3101077

-1

爲響應在IE上工作。不要在<table>中包含圖片。只需使用<div>並使用CSS：

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

來源

2017-04-03 13:08:39 Neoray

自動圖像調整：在Chrome 100％的工程，但不是IE瀏覽器時，父div有位置：絕對

回答

相關問題