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

Характеристика Описание [xfgiven_gallery]Галерея[/xfgiven_gallery] [xfgiven_video]Презентация[/xfgiven_video]

Технические характеристики шаблона

[xfgiven_templ-version]

Версия шаблона: [xfvalue_templ-version]

[/xfgiven_templ-version]

Версия DLE: 10.x - 12

Верстка: HTML/CSS/JS

Тип верски / Ширина шаблона: Блочная, адаптивная / 320px-1170px

Кроссбраузерность: Firefox, Chrome, Opera, Yandex, IE9-11, мобильные устройства;

[xfgiven_tematika]

Тематика: [xfvalue_tematika]

[/xfgiven_tematika] [xfgiven_doppole]

Использование дополнительных полей: Да

[/xfgiven_doppole]

Обновления и тех. поддержка: в течении одного года с момента покупки

Шаблон имеет первоначальную SEO-оптимизацию

Описание шаблона

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

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

Презентация шаблона

[/xfgiven_video]