Отзывчивое изображение vs определяет ширину и высоту изображения в HTML

Я читаю отзывчивый дизайн, и я заметил следующую проблему:

Одна из рекомендаций, относящихся к "Fluid Images", заключается в использовании правила CSS, например:

img {
max-width: 100%;
height: auto; }

но для того, чтобы он имел правильное влияние, нам нужно разбить встроенные атрибуты ширины и высоты изображения тега img.

Как это согласуется с Важно указать ширину и высоту изображения в HTML?

Спасибо

Ответ 1

Хотя (как я уже сказал в моем другом ответе) атрибуты width и height не мешают изображениям жидкости, жидкие изображения мешают еще не загруженным изображениям, занимающим достаточное количество пространства в браузерах другой чем Chrome. Для этого есть обход: оберните изображение в div с внутренним соотношением, как описано в этой статье: http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/

.img-wrapper {
    max-width: 200px; /* The actual width of the image */
}

.img-wrapper2 {
    height: 0;
    padding-bottom: 100%; /* The image height divided by its width */
}

К сожалению, для этого требуется два разделителя оболочки, чтобы получить эффект максимальной ширины. Тем не менее, он обеспечивает те же преимущества для очевидной скорости загрузки, что и атрибуты width и height. Вы можете указать .img-wrapper overflow: hidden, чтобы скрыть некоторые из патологического поведения старого IE.

jsFiddle: http://jsfiddle.net/7j3db/32/

Ответ 2

Вам не нужно снимать атрибуты ширины и высоты изображения.

jsFiddle: http://jsfiddle.net/7j3db/

Протестировано в браузерах Chrome, Firefox, Opera, IE9 и IE9, имитирующих IE7. Кажется, что они работают нормально во всех них, с конкретным правилом CSS, о котором вы говорили.

EDIT: Протестировано с изображением, которое невозможно загрузить: http://jsfiddle.net/7j3db/1/

Это имело эффект в Chrome и IE (даже IE7), но не в Firefox или Opera. Однако даже в Firefox и Opera эффект был лучше, чем если бы атрибуты ширины и высоты были опущены (поскольку атрибут width все еще имел эффект, хотя атрибут height не был).

Дальнейшее тестирование с помощью alt text (http://jsfiddle.net/7j3db/2/): отлично обрабатывается IE7, но IE9 присоединяется к Opera, а IE8 делает что-то действительно странное (высота изображения зависит от длина текста alt - больше текста alt, тем меньше места). Chrome, похоже, полностью игнорирует текст alt. Opera и FF показывают текст alt, но в остальном они по существу имеют то же поведение, что и раньше. Атрибуты ширины и высоты, по-видимому, не отвечают за любые из этих проблем с белым текстом (однако, в IE8, в некоторой степени).

Ответ 3

Это можно сделать, добавив

html, body{
max-width:100%;
width:100%;
}

а также помещая эти свойства в родительский div тега img.