Лучшая практика, чтобы изображения не сжимались, не вызывали скачки скролла и корректно отрисовывались браузером — с первой миллисекунды.
Есть всего два способа задать изображению размер правильно:
Примеры с квадратной картинкой.
.css
2. Ширина или Высота + Соотношение сторон (aspect-ratio)
.css
Как правильно вычислить соотношение сторон?
1. Например, картинка размером 300 на 200 пикселей.
300 / 200 = 1.5 (делим ширину на высоту)
2. Подставляем значение в aspect-ratio, где слева ширина, справа высота:
Пример
.css
Или можно сразу записать как число: Что будет говорить браузеру: Ширина = высота * 1.5
.css
Если пропорции нестандартные?
Например: 236px на 105px
Делим: 236 / 105 ≈ 2.2476
Пример
.css
Важно
aspect-ratio — это всегда отношение ширины к высоте. Даже если высота больше, делим именно ширину на высоту.
Например: если блок 200 на 400 пикселей, делим: 200 / 400 = 0.5