Изображения

Теперь посмотрим на картинку Оскара. Классов у неё пока нет, а в карточку она вписывается хорошо. Это снова Preflight. Он задаёт всем изображениям такие стили:

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

• display: block — картинка становится блоком на отдельной строке. Без этого браузер показывает изображение как строчный элемент, словно слово в предложении, и оставляет под ним небольшой зазор.
• max-width: 100% — картинка никогда не шире родителя. Наша картинка 600 пикселей в ширину, но сжимается до ширины карточки.
• height: auto — высота следует за шириной, поэтому картинка сохраняет своё соотношение сторон (форму: во сколько раз она шире, чем выше) и не искажается.

Однако у карточек на сайтах картинки обычно одной высоты, какой бы формы ни были фотографии. Если задать картинке и ширину, и высоту, её блок получит форму, отличную от формы самой картинки, а то, как картинка его заполняет, определяет свойство CSS object-fit:

Вот картинка Оскара в блоке, который вдвое шире, чем выше (пунктирная линия):

object-fill

object-cover

object-contain

Чаще всего нужен object-cover: блок заполнен, а кот не выглядит сплюснутым. Попробуем по шагам.