Адаптивные изображения требуют исключения атрибутов ширины/высоты?
Одним из принципов адаптивного веб-дизайна являются адаптивные изображения: определение размеров изображений с использованием процентов, а не конкретных значений. Это делается с помощью CSS.
Проблема, с которой я сталкиваюсь, заключается в стандартной практике включения атрибутов width и height в тег img. Это, по-видимому, исключается установкой размеров изображений в CSS. Во-первых, уже давно требуется включать атрибуты размеров в тег изображения. Кроме того, эти значения использовались для создания пространства на странице перед загрузкой изображения.
Что касается размера, я полагаю, что можно поместить изображение в другой элемент (например, figure) и установить ширину изображения в CSS равной 100%. Но тогда для этого потребуется определить размер контейнера, возможно, в процентах от родительского элемента, и так далее.
Я не думаю об этом прямо или установка размера изображения в CSS противоречит использованию атрибутов width и height?
1 answers
Атрибуты width и height элемента img не требуются ни под каким типом документа, если это подразумевалось. В этом отношении нет никакой разницы между Строгим, переходным и HTML5.
Как вы предполагаете, эти атрибуты были "необходимы" только для резервирования места на странице и предотвращения перемещения страницы по мере ее загрузки, что важно. Это может быть достигнуто с помощью CSS, а не при условии, что CSS загружается достаточно быстро - он, скорее всего, загрузится до изображения в любом случае, так что все должно быть хорошо.
Также возможно (и допустимо) указать только один атрибут, width или height, и браузер вычислит пропущенное значение, чтобы сохранить правильное соотношение сторон.
При необходимости вы можете указать процентные значения в атрибутах. Вам не нужно использовать CSS для этого, если вы это подразумеваете. ИЗМЕНИТЬ: Однако я считаю, что в HTML5 это немного изменилось. В HTML5 width и height могут принимать только значение пикселя, другими словами, допустимое неотрицательное целое число.
Используете ли вы атрибуты width и height, может зависеть от вашего дизайна. Если у вас много изображений разного размера, хотите ли вы объединить все размеры в CSS или включить их в img?