如何使用純css自動調整圖像的響應式設計？

Question

我試圖使用CSS屬性max-width自動調整圖像大小，但它在IE7和IE8中不起作用。 有沒有辦法在IE7和IE8中使用純CSS自動調整圖像大小？

Answer 1

使用width: inherit; 使它在IE8中使用純CSS。 （請參閱responsive-base.css 。）像這樣：

img {
  width: inherit;  /* This makes the next two lines work in IE8. */
  max-width: 100%; /* Add !important if needed. */
  height: auto;    /* Add !important if needed. */
}

我不確定它是否適用於IE7-請測試一下，如果您正在測試IE7，請告訴我們。 在我弄清楚width: inherit之前width: inherit技術我在下面使用jQuery，所以你可以試試它，如果你真的需要支持到IE7並且第一種技術不起作用：

<!--[if lt IE 9]><script>
jQuery(function($) {
    $('img').each(function(){
        // .removeAttr supports SSVs in jQuery 1.7+
        $(this).removeAttr('width height');
    });
});
</script><![endif]-->

Answer 2

IE 7和8不識別以下內容：

#my-div img
      {
         max-width:100%;
         _max-width:100%;
      }

Answer 3

嘗試這樣的事情：

width: expression(document.body.clientWidth > 800 ? "800px" : "auto" );

/* If page is wider than 800px then set width to 800px, otherwise set to auto */

來源（值得一看）

Answer 4

您需要IE 6-7的一次性緩存表達式。

IMG {
zoom:expression(
    function(t){
        t.runtimeStyle.zoom = 1;
        var maxW = parseInt(t.currentStyle['max-width'], 10);
        var maxH = parseInt(t.currentStyle['max-height'], 10);
        if (t.scrollWidth > maxW && t.scrollWidth >= t.scrollHeight) {
            t.style.width = maxW;
        } else if (t.scrollHeight > maxH) {
            t.style.height = maxH;
        }
    }(this)
);
}

示例： http ： //kizu.ru/lib/ie/minmax.html JS源文件： http ： //kizu.ru/lib/ie/ie.js

作者：羅曼科馬羅夫

Answer 5

大多數網絡開發人員都知道IE在標准競爭中落后，能夠展示最新和最好的標准。 許多CSS2屬性不受支持。 一些更有用的屬性是最大寬度 ，最大高度，最小寬度和最終最小高度等屬性。 試試這個：

<html>
<style>
p {
border:1px solid red;
width:expression( 
    document.body.clientWidth > (500/12) * 
    parseInt(document.body.currentStyle.fontSize)?
        "30em":
        "auto" );
}
</style>
<body>
<p>
[alot of text]
</p>

Answer 6

使用max-width: 100% with height:auto ，plus width:auto for IE8：

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

/* Media Query to filter IE8 */
@media \0screen 
  {
  img 
    { 
    width: auto;
    }
  }

Answer 7

因為您還需要支持媒體查詢..您可以使用以下polyfill為IE6-IE8添加對媒體查詢的支持

https://github.com/scottjehl/Respond （非常小，只需1-2kb縮小和gzip）然后使用以下css：

@media screen and (min-width: 480px){
    img{
     max-width: 100%;
     height: auto;
   }
}

Answer 8

我測試了它並為每個瀏覽器工作

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

如何使用純css自動調整圖像的響應式設計？

問題描述

8 個解決方案

解決方案1
14 2012-01-12 04:34:51

解決方案2
2 2012-04-10 11:09:39

解決方案3
2 2011-11-18 05:07:40

解決方案4
2 2011-11-18 05:53:44

解決方案5
1 2011-11-18 05:08:05

解決方案6
0 2012-12-30 16:26:24

解決方案7
0 2013-01-29 07:23:04

解決方案8
0 2015-04-19 14:22:45

如何使用純css自動調整圖像的響應式設計？

問題描述

8 個解決方案

解決方案1 14 2012-01-12 04:34:51

解決方案2 2 2012-04-10 11:09:39

解決方案3 2 2011-11-18 05:07:40

解決方案4 2 2011-11-18 05:53:44

解決方案5 1 2011-11-18 05:08:05

解決方案6 0 2012-12-30 16:26:24

解決方案7 0 2013-01-29 07:23:04

解決方案8 0 2015-04-19 14:22:45

解決方案1
14 2012-01-12 04:34:51

解決方案2
2 2012-04-10 11:09:39

解決方案3
2 2011-11-18 05:07:40

解決方案4
2 2011-11-18 05:53:44

解決方案5
1 2011-11-18 05:08:05

解決方案6
0 2012-12-30 16:26:24

解決方案7
0 2013-01-29 07:23:04

解決方案8
0 2015-04-19 14:22:45