html - 如何使用纯 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 技术之前，我使用了下面的 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]-->