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技术之前，我正在使用下面的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

尝试这样的事情：

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

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

Source（值得一看）

Answer 3

您需要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

作者：Roman Komarov

Answer 4

IE 7和8不能识别以下内容：

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

Answer 5

大多数网络开发人员都知道IE在标准竞赛中落后，能够展示最新和最好的标准。许多CSS2属性不受支持。一些更有用的属性是 max-width ，max-height，min-width和最终min-height等属性。试试这个：

<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%与height:auto一起使用，再加上width:auto用于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缩小和压缩）然后使用以下css：

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

Answer 8

我测试了它并为每个浏览器工作

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

如何使用纯css自动调整图像的响应式设计？

8 个答案: