0

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

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), то она должна уменьшится сохраняя пропорции, чтобы поместиться в эту область

1 ответ 1

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>

5
  • не работает с длинными картинками, вот с такой например i.ibb.co/wNsLqwP/1111.png
    – helldrg
    Commented 30 мая 2020 в 17:06
  • @helldrg почему не работает? Она полностью вписалась по высоте в блок при этом сохранив пропорции. т.е. высота её стала 600px вместо 1000px исходника. Соответственно ширина стала 2400px, то что влезло отобразилось, остальное вне блока невидимо, так как блок шириной 800px, вот вы и получили свои желаемые 800x600px Commented 30 мая 2020 в 17:16
  • надо что бы картинка уменьшилась и влезла в область 800 на 600 сохранив пропорции
    – helldrg
    Commented 30 мая 2020 в 17:23
  • @helldrg Так это же ещё проще. Сейчас подредактирую ответ Commented 30 мая 2020 в 17:35
  • 1
    Спасибо большое! Идеально =)
    – helldrg
    Commented 30 мая 2020 в 18:05

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.