IE8非兼容模式，图像最大宽度和高度：auto

Question

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

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

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

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

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

我意识到如果我去掉它就

width="900" height="600"

可以解决问题，但这不是我的选择。

Answer 1

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

width: auto;

它就可以了。

Answer 2

为 ie8 设置 width:inherit

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

Answer 3

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

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

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

在 IE8 中运行得很好！

Answer 4

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

经过多次搜索，我发现修复它的方法是从相关图像中删除高度和宽度属性。可以在这里找到解释：缩放图像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
            });
        }
    });       
}

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

Answer 5

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

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

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

Answer 6

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

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

如果您设置样式：
.wrapper1 { 宽度：50%；浮动：向左； } // 该列的宽度最大为 450px；

图像仍然是 700px，导致布局被破坏。

解决方案：
.wrapper1 { 宽度：50%；浮动：向左； } // 此列的宽度最大为 450px；
.wrapper2 { 宽度 100%;浮动：向左； } // 如果有边框或填充，宽度会变小 100%

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

问候，
江天