当前位置：文江博客话题详情

如何使用纯 CSS 自动调整图像大小以实现响应式设计？

发布于 2024-12-16 20:05:15 字数 107 浏览 4 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

蓝海似她心 2024-12-23 20:05:16

尝试这样的事情：

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

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

来源（值得一看）

Try something like this:

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

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

Source (worth taking a look at)

回复收藏 0 原文

陌伤ぢ 2024-12-23 20:05:16

您需要一个适用于 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

作者：罗曼·科马罗夫

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 原文

ぽ尐不点ル 2024-12-23 20:05:16

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

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

Doesn't IE 7&8 recognise the following:

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

回复收藏 0 原文

怀念你的温柔 2024-12-23 20:05:16

大多数 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>

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 原文

当爱已成负担 2024-12-23 20:05:16

对于 IE8，使用 max-width: 100% 和 height:auto，加上 width:auto：

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

/* Media Query to filter IE8 */
@media \0screen 
  {
  img 
    { 
    width: auto;
    }
  }

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 原文

枕头说它不想醒 2024-12-23 20:05:16

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

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

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

As you also want support for media queries..You can use the following polyfill to add support for media queries to IE6-IE8

https://github.com/scottjehl/Respond (very small in size, just 1-2kb minified and gzipped)
then use the following css:

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

回复收藏 0 原文

要走就滚别墨迹 2024-12-23 20:05:16

我测试了它并适用于每个浏览器

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

I tested it and working for every browser

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

回复收藏 0 原文

慕烟庭风 2024-12-23 20:05:15

使用 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]-->

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 原文

~没有更多了~