Как сделать изображение по размеру блока?

Сделать изображение по размеру блока через css можно за два шага. Нужно для изображения задать обертку. Это может быть любой элемент. Эта обертка будет ограничителем размера и для него задаем ширину и высоту (wight и hight).

После этого, помещаем картинку в наш контейнер и прописываем стили. Как было сказано выше, для обертки обязательно задаем высоту и ширину. Остальные стили задаются для сохранения дизайна сайта.

Чтобы картинка растянулась по размерам блока-обертки добавляем свойство object-fit.
Определяемся с желаемым результатом. Если написать object-fit: cover, то изображение растянется на весь блок, но может быть обрезано или будут нарушены пропорции.

Обойти это можно используя object-fit: fill, в результате чего картинка будет вписана в размер блока без нарушения пропорций.
После добавления свойства object-fit для изображения, в стилях задайте высоту и ширину на 100%.

Пример кода


<!-- html код разметки-->
<div class="img_wrapper">
     <img src="./img/1.png">
</div>

<!-- стили-->
.img_wrapper {
    height: 100vh;
    width: 100%;
    position: relative;
}
.img_wrapper  img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

Творческая мастерская Ваш WEB стиль. Разработка и дизайн сайтов
Закрыть форму
Спасибо. Ваше сообщение отправлено

В ближайшее время, мы свяжемся с вами для уточнения всех деталей. Письмо придет на указанную электронную почту