0

Нужно сделать так, чтобы изображение растягивалось на всю высоту экрана при этом сохранила свои пропорции, изображения могут быть разной ширины и высоты. В lightbox при открытии изображения высчитывается его пропорция и изображение растягивается на всю высоту экрана. Если высота экрана и картинки будет нормальной, а ширина нет, то будет выполнятся одно действие, а если наоборот, то другое. Мне нужно понять как это сделать. Может кто сталкивался с решением такой задачи?

3
  • Для сохранения пропорций, нужно сохранить неизименной либо ширину, либо высоту. Т.е. либо задаём ширину 100, а высота будет вычислена через аспект автоматически, либо задаем высоту 100, а ширина будет вычислена автоматически.
    – nick_n_a
    6 дек 2018 в 7:40
  • почитайте про object-fit.
    – NeedH8
    6 дек 2018 в 8:43
  • Мне нужно решение на js, object-fit мне не подходит.
    – Zebren
    6 дек 2018 в 8:58

2 ответа 2

1

Есть такая штука, для background - background-size: contain, для img - object-fit: contain
Суть является в том, что эти свойства масштабирует фоновое изображение согласно заданным размерам.

$('#resize').bind('change',function(){
  var option = $(this).val();
  if(option=='background') {
    $('.resize.background').hide();
    $('.resize.image').show();
  } else if(option=='image') {
    $('.resize.image').hide();
    $('.resize.background').show();
  }
});
body {margin: 0; width: 100wh; height: 100vh; overflow: hidden;}

.resize {
  display: block;
  width: 350px;
  height: 150px;
  resize: both;
  overflow: hidden;
}

.resize.background {
  background: #000 url('https://via.placeholder.com/300x200') no-repeat center center / contain;
}

.resize.image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: #000;
}

select {
  position: absolute;
  left: 5px;
  top: 5px;
  z-index: 9999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!------>
<div class="resize background"></div>
<div class="resize image" style="display:none">
  <img src="https://via.placeholder.com/300x200">
</div>
<select id="resize">
  <option selected>background</option>
  <option>image</option>
</select>

1
  • Цитирую - "Мне нужно решение на js, object-fit мне не подходит.". Прежде чем добавлять решения, нужно удостоверится что я об этом не знаю и не упоминал об этом.
    – Zebren
    6 дек 2018 в 16:53
0

Если реально JS юзать, то можно попробовать это:

$(function(){
    $('#content img').load(function(){
       var $img = $(this);
       $img.attr('width', $img.width()).attr('height', $img.height());
    });
});

Мне кажется, лучше использовать % размеры:

<figure>
    <img src="image/redcat.jpg" alt="Рыжая кошка" width="100%">
</figure>
<style>
figure {
    width: 27%; /* Ширина */
    float: left; /* Выстраиваем элементы по горизонтали */
    margin: 0 0 0 3.5%; /* Отступ слева */
    background: #f0f0f0; /* Цвет фона */
    border-radius: 5px; /* Радиус скругления */
    padding: 2%; /* Поля */
}
figure:first-child {
    margin-left: 0; /* Убираем отступ для первого элемента */
}
</style>

Ели надо качество стараться сохранять, то вот для интерполяции:

<style>
   img { border: 1px solid #ccc; }

   .edge {
    image-rendering: -moz-crisp-edges; /* Firefox */
    -ms-interpolation-mode: nearest-neighbor;  /* IE */
    image-rendering: crisp-edges; /* Стандартное свойство */
   }
</style>

<img src="image/russia.png" alt="Флаг России" width="200">
<img src="image/russia.png" alt="Флаг России" width="200" class="edge">

Скорее всего один из вариантов тебе подойдет. Или попробуй искать отношения по высоте и ширине:

let img = $('#image');
let imgWidth = img.width();
let imgHeight = img.height();

let ratioWidth = $('body').width()/imgWidth;
let ratioHeight = $('body').height()/imgHeight;

$('span').append('<p>Ширина картинки: ' + imgWidth + '</p>');
$('span').append('<p>Высота картинки: ' + imgHeight + '</p>');
$('span').append('<p>Отношение по ширине: ' + ratioWidth + '</p>');
$('span').append('<p>Отношение по высоте: ' + ratioHeight + '</p>');

img.width(img.width()*ratioWidth);
img.height(img.height()*ratioHeight);
4
  • А если высота экрана нормальная, но ширина изображения выходит за экран, то что делать? Так же если ширина изображения будет больше ширины экрана, но высота нормальная?
    – Zebren
    6 дек 2018 в 7:59
  • Если изображение в DIV каком-то, то оно ограничится размерами DIV. 6 дек 2018 в 8:02
  • Так мне надо чтобы изображение подстраивалось под размер экрана, а не была относительна от блока.
    – Zebren
    6 дек 2018 в 8:20
  • @Zebren набросал решение - пропорции 6 дек 2018 в 12:33

Ваш ответ

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

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