Отзывчивое изображение 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.