Использование изображений в HTML
Элемент <img> позволяет вставлять изображения в HTML-документ, а <picture> отвечает за адаптивные изображения.
В этих статьях содержатся рекомендации по добавлению и настройке изображений.
- Типы и форматы файлов изображений
-
Руководство по различным типам файлов изображений, которые обычно поддерживаются веб-браузерами, с описанием вариантов использования, возможностей и совместимости. Кроме того, эта статья содержит рекомендации по выбору оптимального типа файла изображения для конкретной ситуации.
- Использование атрибутов
widthиheightпомогает избежать задержек -
Вычисление соотношения сторон изображения на ранней стадии может использоваться для резервирования необходимого места на странице до её полной загрузки.
Полезные ссылки
В этих статьях рассматриваются некоторые элементы HTML и свойства CSS, которые используются для управления отображением изображений.
HTML
<img>-
HTML-элемент
<img>используется для добавления изображения на веб-страницу. Он поддерживает широкий набор атрибутов, управляющих поведением изображения, и позволяет добавлять важную информацию, например, тектовое описание с помощью атрибутаalt, для тех, кто не видит изображение. <picture>-
HTML-элемент
<picture>может содержать несколько элементов<source>и один элемент<img>и предоставляет версии изображения для различных вариантов отображения. Браузер учитывает каждый дочерний элемент<source>и выбирает наиболее подходящий из них.
CSS
object-fit-
Свойство
object-fitопределяет, как содержимое замещаемых элементов (например,<img>или<video>) масштабируется внутри своего контейнера. object-position-
Свойство
object-positionопределяет выравнивание содержимого выбранного замещаемого элемента внутри его области. Пустые участки заполняются фоном контейнера. background-image-
Свойствл
background-imageопределяет одно или несколько фоновых изображений для элемента.
Смотрите также
- Адаптивные изображения
-
В этой статье рассказывается о концепции адаптивных изображений, о том, как они подстраиваются под экраны с разными размерами и разрешениями и о возможностях HTML для их реализации.