How to auto resize the image for responsive design

2019-03-25 18:24发布

站内问答 / HTML/CSS
1512 8 5

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?

8条回答
三岁会撩人
2楼-- · 2019-03-25 18:59

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. */
}

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]-->
查看更多
0人赞 添加讨论(0) 举报
Luminary・发光体
3楼-- · 2019-03-25 19:02

You need a one-time cached expression for 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)
);
}

Example: http://kizu.ru/lib/ie/minmax.html JS source file: http://kizu.ru/lib/ie/ie.js

Author: Roman Komarov

查看更多
0人赞 添加讨论(0) 举报
ゆ 、 Hurt°
4楼-- · 2019-03-25 19:03

Doesn't IE 7&8 recognise the following:

#my-div img
      {
         max-width:100%;
         _max-width:100%;
      }
查看更多
0人赞 添加讨论(0) 举报
The star\"
5楼-- · 2019-03-25 19:10

I tested it and working for every browser

img{
    height: auto;
    max-width: 100%;
}
查看更多
0人赞 添加讨论(0) 举报
走好不送
6楼-- · 2019-03-25 19:11

Use 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;
    }
  }
查看更多
0人赞 添加讨论(0) 举报
啃猪蹄的小仙女
7楼-- · 2019-03-25 19:13

Most web-developers know that IE has fallen behind in the race for standards and being able to show the latest and greatest. Many CSS2 properties are unsupported. Some of the more useful ones, are properties such as max-width, max-height, min-width and finally min-height. Try this:

<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>
查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)