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

Question

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

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

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

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

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

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

width="900" height="600"

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

Answer 1

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

width: auto;

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

Answer 2

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

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

Answer 3

Ух ты, сэкономил мне там кучу времени!

у меня была аналогичная проблема с изображением в положении:абсолютное значение, где ширина волшебным образом принимала значение max-width.Это странно, потому что он не делает этого, когда изображение не было в нужном положении:абсолютный.

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

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

Answer 4

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

После долгих поисков я обнаружил, что способ исправить это - удалить атрибуты высоты и ширины из рассматриваемых изображений.Объяснение можно найти здесь: Масштабирование изображений в IE8 с помощью CSS max-width

Код выглядит следующим образом:

CSS - файл:

.entry img {
    max-width:615px
    height:auto;
}

СЦЕНАРИЙ

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 - 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;Ширина веб-страницы составляет 900 пикселей;

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

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

Изображение по-прежнему имеет размер 700px и делает макет нарушенным.

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

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

С уважением,
Куонг Скай