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

У меня есть изображение с этой разметкой

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

И я использую CSS, чтобы уменьшить его до ширины 600 пикселей, например:

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

Может ли кто-нибудь объяснить, почему этот метод работает в режиме совместимости, но не в стандартном режиме? Есть ли способ изменить мой CSS, чтобы он работал в стандартном режиме?

Я понимаю, что если я вычеркнул

width="900" height="600"

что он решает проблему, но это не вариант, который у меня есть.

Ответ 1

Я не уверен в первопричине, но если вы добавите

width: auto;

тогда он работает.

Ответ 2

установите width:inherit для ie8

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

Ответ 3

Вау, спаси меня много времени!

У меня была аналогичная проблема с изображением в положении: абсолютное, где ширина магически принимала значение максимальной ширины. Его странно, потому что он не делает этого, когда изображение не находится в положении: абсолютное.

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

отлично работает в IE8!

Ответ 4

Ничего себе, что такое боль 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
            });
        }
    });       
}

Я использую это для настройки конкретной функции загрузки изображения, но ее можно добавить к любой готовой или готовой к загрузке документа функции.

Ответ 5

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

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

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

Ответ 6

max-width изображений просто отлично работает на 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 max; .wrapper2 { width 100%; float: left; }//если у него есть граница или отступы, ширина будет меньше 100%

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

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