CSS и HTML: cвойства изображений

Изображение в HTML вставляется тегом img:

<img src="image.png" alt="Замещающий текст">

img – одиночный тег. У него 2 обязательных атрибута: src типа путь к файлу и alt типа текст.

Распространенные форматы изображений: jpeg, png (не имеет стандартной иконки), svg, webp:

Изображения бывают растровые и векторные. Растровые состоят из квадратных пикселей. Векорные – из кривых и других графических примитивов, правил их построения в изображение. svg – векторный формат.

Изображение в HTML – по умолчанию строчный блок (display: inline-block;). Это значит, что картинка в тексте воспринимается браузером как элемент текста.

Свойства изображений

Размеры, ширина, высота – width, height

ширина, width: 100px;
минимальная ширина, min-width: 100px;
максимальная ширина, max-width: 100px;
высота, height: 100px;
минимальная высота, min-height: 100px;
касимальная высота, max-height: 100px;

Отступы, поля – margin и padding

Поля страницы можно инспектировать в браузере по нажатию F12, вкладка Elements

margin: 0; (внешнее поле, маргиналии)
padding: 20px; (внутренний отступ)

Рамка – border

рамка, обобщенное правило. border: 2px dashed blue;
радиус скругления рамки. border-radius: 5px;
Скруглить квадрат до круга – border-radius: 50%; Пример: аватарка

Картинка на фоне – background

Свойство background обобщает ряд свойств:

background-image устанавливает картинку на фоне по ее url-адресу
background-position (top center, right top и т.д.)
background-size (cover, значения 200px 200px)
background-repeat (значения: repeat-x no-repeat repeat-y)
background-attachment Поведение фона при скроллинге (значения: scroll, fixed, local)
background-origin Опредеяет, где отрисовывать фон (значения: border-box, padding-box, content-box, inherit)
background-clip (значения: border-box по умолчанию, padding-box, content-box, inherit) Примеры.
background-color (цвет фона)

Примеры:

background: white url("image.jpg") no-repeat 50% 0; Общее свойство, описывающее фон страницы.
background: url(/media/blog/example_image_1.jpg) center no-repeat;

Живые примеры: