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

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

Допустим у Вас есть изображение размером 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>