Contain or resize Vertical Slick Slider Images?

Develop, Build & Integrate CMS Development
1

The vertical images in my slider are assigning too much screen real estate, essentially causing the height of the slideshow to be too tall. View slide #3 in the following slideshow to see the problem.

Here are the components of the slider:
module.html

<section id="gallery">
 <div class="container">
 <div class="columns">
 <div class="column is-12">
 <div class="gallery__portfolio">
 {% for item in module.gallery %}
 <div class="partener__image__porfolio">
 <img src="{{ item.image_gallery.src }}" alt="ARANA">
 </div>
 {% endfor %}
 </div>
 </div>
 </div>
 </div>
</section>

module.css

#gallery{
 margin: 60px 0;
}
.partener__image__porfolio img{
 width: 50%; 
 object-fit: scale-down;
}
.slick-custom-prev i{
 position: absolute;
 z-index: 2;
 top: 50%;
 background: #999999d1;
 padding: 15px;
 color: #fff;
}
.slick-custom-prev i:hover{
 color: #c13d27;
}
.slick-custom-next i{
 position: absolute;
 z-index: 2;
 top: 50%;
 background: #999999d1;
 padding: 15px;
 color: #fff;
 right: 0;
}
.slick-custom-next i:hover{
 color: #c13d27;
}
.slick-dots button{
 display: none;
}
.slick-dots{
 display: flex;
 justify-content: center;
}
.slick-dots li{
 margin: 5px 10px;
 color: #4e4e4e;
 font-size: 30px;
}
.slick-active{
 color: #c13d27!important;
}

@media (max-width: 435px){
 .slick-custom-prev i {
 top: 32%;
 }
 .slick-custom-next i {
 top: 32%;
 }
}

module.js

$( document ).ready(function() {
 $('.gallery__portfolio').slick({
 dots: true,
 infinite: true,
 speed: 2000,
 autoplay: true,
 slidesToShow: 1,
 slidesToScroll: 1,
 dots: true,
 arrows: true,
 nextArrow: '<a class="slick-custom-next"> <i class="fas fa-angle-right"></i> </a>',
 prevArrow: '<a class="slick-custom-prev"> <i class="fas fa-angle-left"></i> </a>',
 responsive: [
 {
 breakpoint: 768,
 settings: {
 arrows: true,
 }
 },
 ]
 });
});

Here is what each image looks like within the post:

37755iC477E1853236ADFF.jpg
37755iC477E1853236ADFF.jpg701×866 182 KB

Can someone point me in the right direction?
My goal is to have the height of ALL the images the same height regardless of whether they are landscape or portrait, and to have them centered.

2

Hi @mgwaters

Maybe @Kevin-C can help out here. I would make sure to consider that different sized images might look weird when they are meant to conform to a ratio that they are not intended for

3

Hey @mgwaters

I agree with @dennisedson that cropping or scaling the images progammatically might not be the best route.

But it can be done with a caveat:

.slick-track
{
 display: flex !important;
 align-items: center;
 justify-content: center;
 height: 70vh; /* Set the tracks height to 70% of the view port height */
}

.slick-slide
{
 display: flex!important;
 height: inherit !important;
}

.slick-slide img {
 object-fit: cover; /* be aware that this doesn't work on IE */
 height: 100%;
}

Can I use object-fit

4

Thank you!

I used your example and changed object-fit from cover to contain and I think that did the trick.