Вывод картинки с сохранением пропорций

Question

Вот таким не хитрым кодом вывожу изображение на странице:

var resultImg = document.getElementById('resultImg');
resultImg.setAttribute('src', canvasOriginal.toDataURL("image/png"));   
.....
<img id="resultImg" src="" style="max-width: 800px; max-height: 600px;"/>

Картинка может быть квадратной, прямоугольной или же тонкой и/или длинной. Выводить ее нужно в пределах 800 на 600. Как такое можно реализовать? На форуме находил вариант, но там берется div и в него картинка загружается как задний фон. Можно ли сделать по другому? P.S.: Если картинка маленькая она остается маленькой, если картинка большая(больше 800 на 600), то она должна уменьшится сохраняя пропорции, чтобы поместиться в эту область

Answer 1

Вот пример с квадратной картинкой. Сама картинка 800x800

.img-block{
    width: 800px;
    height: 600px;
 }
 .img-block>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 0 0;}

<div class="img-block">
   <img src="https://www.meme-arsenal.com/memes/082cf32e5a8846ae89628b2780595cf1.jpg">
</div>

Так же можно и с широкими и узкими картинками, картинка заполнит пространство внутри div пропорционально как вы и хотите

С учётом пожеланий в комментариях:

let divs = document.querySelectorAll('.img-block');
for (let i=0; i<divs.length; i++){
  divs[i].querySelector('img').height>divs[i].querySelector('img').width?divs[i].querySelector('img').style.height='100%':divs[i].querySelector('img').style.width='100%';
}

.img-block{
width:800px;
height:600px;
border: 2px solid black
}

<div class="img-block">
  <img src="https://i.ibb.co/wNsLqwP/1111.png">
</div>

<div class="img-block">
  <img src="https://wallpapershome.ru/images/pages/pic_v/21485.jpg">
</div>

БЛОГ НА HUSL

Вывод картинки с сохранением пропорций

Ответы (1 шт):