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似乎总是很痛苦。虽然有一个公认的答案，但我发现它并没有解决我的问题。

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

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

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

当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

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

6 个答案: