IE8 режим без совместимости, изображение с максимальной ширины и высоты: авто

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

Мое решение этой проблемы было:

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

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

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 d облегчить мою жизнь. Я также обнаружил, что решение почти сработало, но не совсем. Я играл с ним, пока не смог добиться результатов, которые я искал. Мое решение заключается в следующем:

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

max-width of images просто отлично работает на IE8, когда это прямая оболочка (div) имеет ширину.

Пример:
Изображение в этом примере - 700 пикселей; Ширина сети составляет 900 пикселей;

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

, если стиль: .wrapper1 { width: 50%; float: left; } // ширина этого столбца является 450px макс;

Изображение все еще 700px и сделайте раскладку разбитой.

.wrapper1 { width: 50%; float: left; } // ширина этой колонки не более 450px; .wrapper2 { width 100%; float: left; } // если у него есть граница или отступы, ширина будет меньше 100%

Изображение будет соответствовать столбцу (изображение = 450 пикселей) при уменьшении размера окна, уменьшится изображение на основе ширины обертки2.

С уважением,
Cuong Sky

Answer 6

набор width:inherit для ie8

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