32

我有一张带有这个标记的图片

<img src="wedding_00.jpg" width="900" height="600" />

我正在使用 CSS 将其缩小到 600px 宽度，如下所示：

img {
    max-width:600px;
    height:auto;
}

谁能解释为什么此方法在兼容模式下有效，但在标准模式下无效？有没有办法可以修改我的 CSS 使其在标准模式下工作？

我意识到如果我去掉

width="900" height="600"

它解决了问题，但这不是我的选择。

4

6 回答 6

73

我不确定根本原因，但如果你添加

width: auto;

然后它工作。

于 2009-11-20T15:28:52.753 回答
7

width:inherit为ie8设置

 img {
   width:inherit; //for ie8
   max-width: 100%;
   height: auto;
 }
于 2013-05-02T15:05:47.633 回答
4

哇，在那里为我节省了很多时间！

我对位置图像有类似的问题：绝对宽度神奇地采用最大宽度值。这很奇怪，因为当图像不在位置时它不会这样做：绝对。

width: auto; 
max-width: 200px; 
height: auto; 
max-height: 200px;

在 IE8 中效果很好！

于 2010-12-17T00:27:34.323 回答
2

哇，IE 似乎总是那么痛苦。虽然有一个公认的答案，但我发现它并没有解决我的问题。

经过大量搜索，我发现修复它的方法是从相关图像中删除高度和宽度属性。可以在这里找到解释：Scaling Images in IE8 with CSS max-width

代码如下：

CSS：

.entry img {
    max-width:615px
    height:auto;
}

脚本

var imgs, i, w;
var imgs = document.getElementsByTagName( 'img' );
for( i = 0; i < imgs.length; i++ ) {
    w = imgs[i].getAttribute( 'width' );
    if ( 615 < w ) {
        imgs[i].removeAttribute( 'width' );
        imgs[i].removeAttribute( 'height' );
    }
}

现在我倾向于尽可能多地使用 jQuery，为了解决这个问题，我使用了一些不同的函数来定位 IE8，让我的生活更轻松。我还发现该解决方案几乎奏效了，但并不完全奏效。我玩弄了它，直到我能够达到我想要的结果。我的解决方案如下：

查询：

var maxWidth = 500;

function badBrowser(){
if($.browser.msie && parseInt($.browser.version) <= 8){
    return true;
}   
    return false;
}


if(badBrowser()){
    $('img').each(function(){
        var height = $(this).height();
        var width = $(this).width();
        if (width > maxWidth) {

            var ratio = (maxWidth /width)  
            $(this).css({
                "width":maxWidth,               
                "height":(ratio*height)
            });
            $(this).removeAttr('width'); 
            $(this).removeAttr('height');
        }else{
            $("#cropimage").css({
                "width":width,               
                "height":height
            });
        }
    });       
}

我使用它来定位特定的图像加载功能，但它也可以添加到任何文档就绪或窗口加载功能。

于 2012-03-16T01:06:56.763 回答
0

我对这个问题的解决方案是：

  <!--[if IE 8]>
  <style>
   a.link img{
          max-height:500px ;
          width:auto !important;
          max-width:400px;
          height:auto !important;
          width:1px; 

        }
  </style>
  <![endif]-->
于 2010-06-10T11:11:10.393 回答
0

当直接包装器（div）具有宽度时，图像的最大宽度在 IE8 上可以正常工作。

示例：
本示例中的图片为 700px；网页宽度为 900px；

<div class="wrapper1"><div class="wrapper2"><img style="max-width: 100%;" src="abc.jpg" alt="Abc" /></div></div>

if you style: .wrapper1 { width: 50%; float: left; }// 此列的宽度最大为 450 像素；

图像仍为 700 像素，并使布局损坏。

解决方案： .wrapper1 { width: 50%; float: left; }//此列的最大宽度为 450px； .wrapper2 { width 100%; float: left; }// 如果有边框或内边距，宽度会缩小 100%

当调整窗口大小时，图像将适合列（图像 = 450px），图像将根据 wrapper2 的宽度变小。

问候，
Cuong Sky

于 2012-12-31T04:28:39.197 回答