如何使用纯 css 自动调整图像大小以进行响应式设计？答案

【问题标题】：How to auto resize the image for responsive design with pure css?如何使用纯 css 自动调整图像大小以进行响应式设计？
【发布时间】：2011-12-31 22:56:02
【问题描述】：

我尝试使用 CSS 属性 max-width 自动调整图像大小，但它在 IE7 和 IE8 中不起作用。有没有办法在IE7和IE8中使用纯CSS自动调整图像大小？

【问题讨论】：

expression 只是样式表中的javaScript，如果用户关闭javaScript，它将不起作用。因此，您最好使用 javaScript 来保持样式表干净
是的，史蒂文你是对的，我认为使用 javscript 比使用不干净的 css 更好。
max-width property is indeed supported by IE7 (and IE8)。如果没有看到您的代码，很难说出为什么它对您不起作用。要在 IE7 和 IE8 中获得高质量缩放，您需要添加 AlphaImageLoader 和 sizingMethod="scale"，但这不是缩放图像所必需的，只是为了改善外观。
非常感谢大家，现在在 ie8 和 ie7 max-width 中运行良好，同时 @media 查询中的响应式设计在 ie7 和 ie8 中不起作用。如果您有更好的解决方案，请建议我。

标签： html css image scaling

【解决方案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]-->

【讨论】：

你救了我的命。谢谢！这在 IE 8 中完美运行。我没有在 IE 7 中尝试，因为我们不必支持它。
@JeremyGlover 太棒了，是的，我知道必须有一种方法——我尝试了很多方法，width:inherit 成功了。

【解决方案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（值得一看）

【讨论】：

【解决方案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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

大多数 Web 开发人员都知道 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>

【讨论】：

虽然我鄙视 IE 和/或 MS 出于不同的原因，其中之一是我必须让设计为 IE6/7 工作:)，但我不认为 IE10“已经落后于标准竞赛”。他们已经或将要回来。

【解决方案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;
    }
  }

【讨论】：

【解决方案7】：

由于您还希望支持媒体查询..您可以使用以下 polyfill 向 IE6-IE8 添加对媒体查询的支持

https://github.com/scottjehl/Respond（体积非常小，压缩和压缩后只有 1-2kb）然后使用以下css：

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

【讨论】：

【解决方案8】：

我对其进行了测试并适用于所有浏览器

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

【讨论】：