Отзывчивые изображения: CSS-приёмы, которые помогают экономить время

[vin2809]

Мне кажется, что images and deadlines
стоит переводить как изображения и сроки, а не дедлайны…

[savostin]

Такой подход применим в большинстве случаев, тогда, когда ваш макет не слишком сложен.

Насколько должен быть сложным макет, чтобы этот (как по мне самый простой вариант) не подошел?

[wheercool]

№4 вариант не позволяет задать жесткий размер картинки, например в карточках товара.

[PaulZi]

Третий и четвёртый способ не равен `background-size: cover`, при длинной картинке они покажут поля:
codepen.io/anon/pen/JaYgKg
codepen.io/anon/pen/qMOeqW

[iZamza]

3-й способ очень полезен для, например, добавления видео из youtube… Т.е. вещей в которых соотношение сторон не меняется, и не хочется что бы вылазили полоски. Высчитывается делением высоты на ширину х 100%. Т.е. 9:16х100 = 56,25% и т.д.
Встречал раньше немного другую интерпретацию данного приема.
Там использовались 3 дива( родитель, див с паддингом и 0 высотой, и непосредственно контент в абсолюте)

.parent{
position:relative;
.ratio{padding-top: 56,6%; 
height: 0px;}
.content{
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
}
}

[Optimus_990]

Полезные штуки!