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

StackOverflow https://stackoverflow.com/questions/1771176

题

我有一个图像与该标记

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

和我使用CSS将其缩小到600像素的宽度，像这样：

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

任何人都可以解释为什么这种方法在兼容模式下工作，但不能在标准模式？有没有一种方法，我可以改变我的CSS，使其在标准模式下工作？

我认识到，如果我剥离出

width="900" height="600"

，它解决了这个问题，但是这不是一个选项我

有帮助吗？

解决方案

我不知道的根本原因，但如果添加

width: auto;

然后它工作。

其他提示

有IE8组width:inherit 

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

哇，我节省了大量的时间！

我有一个类似的问题，在位置的图像：其中，绝对宽度奇迹般地采取最大宽度值。它的奇怪，因为它不这样做，当图像不在位置：绝对

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

在IE8的伟大工程！

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

多搜索后，我发现，解决它的办法是删除的高度和宽度从所讨论图像属性。一种解释可以在这里找到：缩放图像中IE8与CSS最大宽度

的代码如下所示：

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

我使用它来针对特定的图像负载的功能，但它可以被添加到任何文件准备或窗口负载函数为好。

我对这个问题的解决办法是：

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

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

的图像的最大宽度只是工作在IE8细时，它的直接包装（DIV）具有宽度。

例：结果 本例中的图像是700像素; 腹板的宽度是900px;

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

如果你的风格

： .wrapper1 { width: 50%; float: left; } //这列的宽度是450像素最大值;

图片仍然700像素和使布局破碎。

解决方案： .wrapper1 { width: 50%; float: left; } //这列的宽度是450像素最大值; .wrapper2 { width 100%; float: left; } //如果它具有边框或填充，宽度将小于100％的

当调整大小的窗口小，图像将较小的基于wrapper2的宽度的图像将配合在柱（图像= 450像素）。

的问候，结果 的Cuong天空

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top