Что делать, когда все картинки разного размера, а хочется вывести их на сайте в виде галереи и чтобы все были одного размера? Да самый лучший способ это изначально их сделать одного нужного размера, либо если у Вас установлен специальный плагин, который при загрузке фото нарезает его на заранее подготовленные размеры. Покажем как можно обойтись когда ничего нет и нужно сделать быстро, или это разовая функция на одной странице и совсем не обязательно для этого устанвливать громоздкие плагины.
Пример 1
- Пример
- HTML
- CSS
<div class="block object-fit">
<div class="image">
<img src="/images/blog-images/demophoto/demophoto1.jpg">
</div>
<div class="image">
<img src="/images/blog-images/demophoto/demophoto2.jpg">
</div>
<div class="image">
<img src="/images/blog-images/demophoto/demophoto3.jpg">
</div>
<div class="image">
<img src="/images/blog-images/demophoto/demophoto4.jpg">
</div>
</div>.block {
display: block;
}
.block .image {
display: inline-block;
overflow: hidden;
}
.block.object-fit img {
object-fit: cover;
object-position: top;
width: 200px;
height: 125px;
}В примере первые 3 фото 800*500, а четвертое 500*800. В css мы задали размеры мест под фото это 200*125, все фото пропорционально умещаются под выбранный размер, но благодаря свойству css object-fit: cover последнее фото увеличивается настолько, чтобы заполнить всю свободное место.
В данном случае, так же важно свойство object-position: top, сейчас оно принимает значение top, тем самым отображая только верхнюю часть изображения, можно сделать среднюю или нижнюю части поменяем свойство на center, left, right, bottom.
Пример 2
Тот же пример, что выше, но теперь при клике фото увеличиваются и можно наглядно увидеть отличие четвертого фото от остальных. Для увеличения можно взять любой из готовый скриптов, мы взяли fancybox.
- Пример
- HTML
- CSS
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css"/>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
<div class="block object-fit">
<div class="image">
<a class="fancy" data-fancybox="image" data-caption="Фото 1" data-src="/images/blog-images/demophoto/demophoto1.jpg" href="#"><img src="/images/blog-images/demophoto/demophoto1.jpg" alt="Фото 1"></a>
</div>
<div class="image">
<a class="fancy" data-fancybox="image" data-caption="Фото 2" data-src="/images/blog-images/demophoto/demophoto2.jpg" href="#"><img src="/images/blog-images/demophoto/demophoto2.jpg" alt="Фото 2"></a>
</div>
<div class="image">
<a class="fancy" data-fancybox="image" data-caption="Фото 3" data-src="/images/blog-images/demophoto/demophoto3.jpg" href="#"><img src="/images/blog-images/demophoto/demophoto3.jpg" alt="Фото 3"></a>
</div>
<div class="image">
<a class="fancy" data-fancybox="image" data-caption="Фото 4" data-src="/images/blog-images/demophoto/demophoto4.jpg" href="#"><img src="/images/blog-images/demophoto/demophoto4.jpg" alt="Фото 4"></a>
</div>
</div>.block {
display: block;
}
.block .image {
display: inline-block;
overflow: hidden;
}
.block.object-fit img {
object-fit: cover;
object-position: top;
width: 200px;
height: 125px;
}