IE6 Img Aspect Ratio, CSS - PullRequest
       1

IE6 Img Aspect Ratio, CSS

0 голосов
/ 01 ноября 2011

Итак, у меня есть следующий код на моем img's

width:100%; height: auto;

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

HTML выглядит так

<div 100% width of window>
     <div 100% with some margin>
          <img that looks great in IE (yeah right..) />
     </div>
</div>

Изображение, которое должно быть 1140px на 392px, отображается при 1140px на 1303px

Ширина кажется правильной, но высота искажается.

Знаете ли вы об исправлении?

Я понимаю, что IE6 находится на выходе, но в некоторых странах мира с более чем 28% использования и корпорациями все еще важно поддерживать его в некоторых случаях.

1 Ответ

1 голос
/ 01 ноября 2011
#yourImgage {
    width:100%; height: auto;
}

он растягивает и сдавливает их, в некоторых случаях он загружает их правильно, но это не согласовано.

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

Итак, вы пытались полностью исключить height?Похоже, что ведут себя так же в других браузерах, возможно, это устранит путаницу IE 6 ...

#yourImgage {
    width:100%;
}

Чего вы здесь добиваетесь?


РЕДАКТИРОВАТЬ:

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

<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6-only.css" />       
<![endif]-->
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...