Как сделать, чтобы фото обрезалось по размеру текстового содержимого?

Question

[Сергей Дроздов]

Как сделать, чтобы высота фото была не больше высоты текстового содержимого?

Comments

[ProjectSoft]

Растяните изображение, как блок. И margin-bottom убрать.

.promotion__image {
	display: block;
	margin: 0 0 -1rem -1rem;
	object-fit: cover;
	height: 100%;
	width: 100%;
}

Результат

Answer 1

[Максим Тимофеев]

положить картинку как фон в див и использовать background-size
https://developer.mozilla.org/en-US/docs/Web/CSS/b...

Answer 2

[imko]

Картинке ширину и высоту в 100% от контейнера и object-fit: cover

Answer 3

[Pavel Merkushevich]

Один из возможных способов - использовать свойство object-fit, которое позволяет задать режим заполнения контейнера изображением. Например, вы можете использовать значение cover, чтобы изображение заполняло контейнер и обрезалось по его границам. Вот пример кода:

img {
  width: 300px;
  height: 200px;
  object-fit: cover;
}

Этот код устанавливает ширину и высоту изображения в 300 и 200 пикселей соответственно и применяет режим заполнения cover