IE8非兼容模式,图像最大宽度和高度:自动

时间:2009-11-20 15:23:15

标签: internet-explorer-8 css compatibility-mode

我有一个带有此标记的图像

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

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

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

有人可以解释为什么这种方法在兼容模式下工作,但不能在标准模式下工作吗?有没有办法可以修改我的CSS以便它能在标准模式下工作?

我意识到如果我剥离

width="900" height="600"

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

6 个答案:

答案 0 :(得分:73)

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

width: auto;

然后它有效。

答案 1 :(得分:7)

为ie8

设置width:inherit
 img {
   width:inherit; //for ie8
   max-width: 100%;
   height: auto;
 }

答案 2 :(得分:4)

哇,在那里救了我很多时间!

我在位置上有一个类似的问题:绝对宽度神奇地取最大宽度值。它很奇怪,因为当图像不在位时它不会这样做:绝对。

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

在IE8中运行良好!

答案 3 :(得分:2)

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

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

代码如下:

<强> CSS:

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

<强> SCRIPT

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并让我的生活更轻松。我还发现解决方案几乎可以工作,但并不完全。我玩弄它,直到我能够达到我想要的结果。我的解决方案如下:

<强> JQUERY:

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
            });
        }
    });       
}

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

答案 4 :(得分:0)

当IE8直接包装(div)有宽度时,图像的最大宽度才能正常工作。

例:
这个例子中的图像是700px; 网络的宽度是900px;

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

如果你的风格: .wrapper1 { width: 50%; float: left; } //此列的宽度最大为450px;

图像仍然是700像素,并使布局破碎。

解决方案: .wrapper1 { width: 50%; float: left; } //此列的宽度最大为450px; .wrapper2 { width 100%; float: left; } //如果它有边框或填充,宽度将小于100%

当调整窗口较小时,图像将适合列(图像= 450px),图像将根据wrapper2的宽度变小。

的问候,
Cuong Sky

答案 5 :(得分:0)

我对此问题的解决方案是:

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

        }
  </style>
  <![endif]-->