如何自动调整图像的响应设计与纯CSS？ [英] How to auto resize the image for responsive design with pure css?

问题描述

我试图使用CSS属性 max-width 自动调整图像大小，但它不工作在IE7和IE8。在IE7和IE8中是否有任何方法使用纯CSS自动调整图像大小？

I have tried to auto resize the image using the CSS property max-width, but it does't work in IE7 and IE8. Is there any way to auto resize the image with pure CSS in IE7 and IE8?

推荐答案

使用 ：inherit; 以使其在IE8中使用纯CSS。
（请参阅 responsive-base.css ）像这样：

Use width: inherit; to make it work with pure CSS in IE8. (See responsive-base.css.) Like this:

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和第一种技术不工作：

I'm not sure if that works in IE7—please test it and let us know if you're testing IE7. Before I figured out the width: inherit technique I was using the jQuery below, so you could try it if you really need support down to IE7 and the first technique doesn't work:

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

这篇关于如何自动调整图像的响应设计与纯CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！