Как вписать картинку в блок без искажений
Короткий ответ
Задайте картинке нужные размеры и object-fit: cover — она заполнит блок целиком, а лишнее обрежется:
<img src="/media/photo-800x500.jpg" alt="A flower" style="width: 200px; height: 200px; object-fit: cover;">cover или contain
cover заполняет весь блок и обрезает края. contain показывает картинку целиком, а по бокам или сверху и снизу остаются пустые поля:
<style>
img { width: 160px; height: 160px; background: whitesmoke; border: 1px solid silver; }
</style>
<img src="/media/photo-800x500.jpg" alt="cover" style="object-fit: cover;">
<img src="/media/photo-800x500.jpg" alt="contain" style="object-fit: contain;">cover подходит для превью и обложек, contain — для логотипов и товаров, у которых важно видеть всё.
Одинаковые карточки
В сетке карточек картинки разных пропорций выравнивают одной высотой или общим aspect-ratio:
<style>
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
</style>
<div class="grid">
<img src="/media/photo-200x200.jpg" alt="Square">
<img src="/media/photo-600x200.jpg" alt="Wide">
<img src="/media/photo-400x250.jpg" alt="Medium">
</div>Частая ошибка
Картинке задают и ширину, и высоту, не указав object-fit. По умолчанию действует значение fill: изображение растягивается под блок и искажается:
<img src="/media/photo-600x200.jpg" alt="A stretched banner" style="width: 200px; height: 200px;">Функции из этого ответа
- object-fit — Как картинка `<img>` или `<video>` вписывается в размеры элемента.
- <img> — Картинка.
- aspect-ratio — Соотношение ширины и высоты: недостающий размер браузер вычисляет сам.
- object-position — Какая часть обрезанной `<img>` или `<video>` остаётся видна.