Нужно сделать так, чтобы изображение растягивалось на всю высоту экрана при этом сохранила свои пропорции, изображения могут быть разной ширины и высоты. В lightbox при открытии изображения высчитывается его пропорция и изображение растягивается на всю высоту экрана. Если высота экрана и картинки будет нормальной, а ширина нет, то будет выполнятся одно действие, а если наоборот, то другое. Мне нужно понять как это сделать. Может кто сталкивался с решением такой задачи?
-
Для сохранения пропорций, нужно сохранить неизименной либо ширину, либо высоту. Т.е. либо задаём ширину 100, а высота будет вычислена через аспект автоматически, либо задаем высоту 100, а ширина будет вычислена автоматически.– nick_n_a6 дек 2018 в 7:40
-
почитайте про object-fit.– NeedH86 дек 2018 в 8:43
-
Мне нужно решение на js, object-fit мне не подходит.– Zebren6 дек 2018 в 8:58
2 ответа
Есть такая штука, для 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>
-
Цитирую - "Мне нужно решение на js, object-fit мне не подходит.". Прежде чем добавлять решения, нужно удостоверится что я об этом не знаю и не упоминал об этом.– Zebren6 дек 2018 в 16:53
Если реально 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);
-
А если высота экрана нормальная, но ширина изображения выходит за экран, то что делать? Так же если ширина изображения будет больше ширины экрана, но высота нормальная?– Zebren6 дек 2018 в 7:59
-
Если изображение в DIV каком-то, то оно ограничится размерами DIV. 6 дек 2018 в 8:02
-
Так мне надо чтобы изображение подстраивалось под размер экрана, а не была относительна от блока.– Zebren6 дек 2018 в 8:20
-