Как пропорционально растянуть изображение по ширине или высоте блока » Купить готовый шаблон сайта на Zapilim.net. Купить адаптивные шаблоны DLE

Как пропорционально растянуть изображение по ширине или высоте блока

Данная статья научит как пропорционально растянуть изображение до ширины или высоты блока

Допустим у Вас есть изображение размером 200*200px. Чтобы его пропорцирнально растянуть по ширине или высоте необходимо сделать 2 действия.

1. Добавить стили в ваш файл .css
.container {
    width: 300px;
    height: 200px;
    border: 1px solid #000;
    overflow: hidden;
    text-align: center;
}

img {
   width: 100%;
   height: 100%;
   object-fit: contain;
}


2. Присвоить имена стилей к вашему блоку
<div class="container">
    <img src="ссылка на картинку" alt="" />
</div>

<div class="container">
    <img src="ссылка на картинку" alt="" />
</div>