Resize Images in Slider

[this]

Hi there
I'm wondering if there's an option to set the height of slider images to auto?
I'd like to remove the white space on the top and bottom of the image when the browser is a not using the full widith of the screen or on a Tablet view.
Also maybe you know a small trick to center the images in the slider when using a real wide screensize?

https://lay.thisisthis.ch/le-grutli-flotte

Basically I would like the image to fill out the right hand space, always centered, no matter the screen size. I'm very much looking forward to any suggestions and ideas.

BTW there's a thin white line at the left border of all images, you can irgnore that, it's within the images for now and I will remove it later.
Thank you very much!

[mariusjopen]

Dear @this
there is not an official way to do this with LayTheme.

You might need to dig into CSS.

https://css-tricks.com/almanac/properties/o/object-fit/

You know the basics of CSS to di so?

Best!

Marius

[this]

Hi Marius

Thank you very much for the reply.
Unfortuinately I only know a little about CSS, but I will try!
I figure I must add this attribute:

.some class {
object-fit: cover;
}

to the corresponding class?
I tried some stuff, but I couldn't find the right class, could you give me a hint?
Thanks a lot and have a nice day
Joel

[mariusjopen]

Dear Joel,

it is a bit more complicated.
I will talk with Armin about it.

Best!

Marius

[this]

Dear Marius
Thank you very much for looking into it!
best
Joel

[mariusjopen]

Dear @this

ok, try this code:

.col .lay-carousel {
    height: 100vh;
    top: 0px !important;
    margin-top: 0px !important;
    padding: 0px !important;
}

.flickity-slider {
    height: 100vh;
    top: 0px !important;
}

.lay-carousel-slide {
    top: 0 !important;
    height: 100vh;
    margin-top: 0px !important;
}

.col .lay-carousel img.h100 {
    height: 100vh !important;
    top: 0;
    object-fit: cover !important;
}

Let me know if it worked.

Best!

Marius

[this]

Hi Marius
Thank you so much, this is alredy a big improvement!
It does fit the height of the portrait-shaped images to the height of the browser.

Unfortunately it stops doing that when the browser width exceeds 1715px of width.
After that, the image will get a left and right hand white border again.
https://lay.thisisthis.ch/versus_installation

Also I found out something else which was very confusing… I tried to increase the size (pixels) of the images because I thought maybe a bigger image would fill the box completely. So instead of images with 954 × 1073px (standard size of all images), I uploaded an image with 1500x1688px.
It didn’t work, there’s still white space left and right of the image, just like with the other, smaller images.
It’s the second last of the versus images in the carousel.

Then something really strange happened: Out of curiosity, I exported the image as a PNG for web and it was somehow cropped by 1px in height, so the size was 1500x 1687px. I realised this only when I uploaded I, because this image inverts the effect described above!

With this image, if the browser is smaller than 1715px in width, the image has a white space on top and bottom of the image.
If the Browser is bigger than 1715px in width, the image is displayed correctly… how is this possible? It did blow my mind a little :)
It’s the last image in the carousel, maybe you know why it’s behaving that way?
Did the slight change in ratio (that happened by accident), change the behaviour of the image within the carousel?

Maybe there's only a little tweak to your prepared css code that'll make all images fit the browser, no matter the ratio of the image, nor the size of the browser?
Thank you so much again for your support!

[mariusjopen]

Hey @this

can you update this CSS class?

.col .lay-carousel img.h100 {
    height: 100vh !important;
    top: 0;
    object-fit: cover !important;
    width: 100%;
}

Let me know if that worked out :-)

Best!

Marius