Slider Image Aspect Ratio

[C00P3R (Rhys)]

Hi everyone,

I have searched and read about this topic in a few old threads.

I am still very new to Webflow so I am sure I have done something wrong. Basically I am wanting to achieve a similar outcome to the website below:

Barber Osgerby

When you resize your browser window the slider ratio remains intact. How am I able to achieve this in Webflow? I have tried a number of options based on threads I’ve read from the past few years but I am unsuccessful.

Am I setting it out incorrectly in the navigator?

Any help is greatly appreciated.

Regards,
Rhys

---

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

[Siton_Systems (Ezra Siton)]

Add read-only link.

Use this styles for the image:

height: 100%;  /* fit height */
width: auto; /* keep image aspect ratio */
object-fit: cover;
margin: 0 auto; /* align image to center */

Align image to the center like this (by simple text-align: center):

Last step - Set the max-height (or height) for the slider (630px in your reference).

**You could change this on mobile to other value like 80vh).

[C00P3R (Rhys)]

Hi Ezra @Siton_Systems thank you so much for your help, very indepth.

Here is a read only link - https://preview.webflow.com/preview/website-a7e0c3?utm_medium=preview_link&utm_source=designer&utm_content=website-a7e0c3&preview=872bc30664b3863698f31be73eda3060&mode=preview

I took the steps you mentioned, and it does seem to scale somewhat but if you wouldn’t mind having a look over my read only incase I’ve done something incorrect?

Images below show how it scale compared to the website I linked in my initial post:

Thank you for your help. Rhys

[Siton_Systems (Ezra Siton)]

If you set the height to 600px - and resize the height of your browser to 500px part of your slider overflow.

In your reference the height of the slider on tablet (mobile is height: 34%; (Using %).

Size | Webflow University

The height on your reference (Again use any height you want - no rules her):

Desktop:

@media (min-height: 901px) and (min-width: 1366px)
.container {
    height: 630px;
    top: 180px;
}

small desktop

@media (max-height: 900px) and (max-width: 1280px)
.container {
    width: 100%;
    height: 50%;
    top: 20%;
}

tablet

@media (max-height: 900px) and (max-width: 768px)
.container {
    width: 100%;
    height: 40%;
    top: 20%;
}

mobile:

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 667px) and (min-device-width: 375px) and (orientation: portrait)
.container {
    top: 30%;
    height: 34%;
}

[C00P3R (Rhys)]

Hi Ezra @Siton_Systems ,

thank you for your help, still early days and trying to understand everything.

I changed the height of my slider into % (instead of PX) and it scales better. Is this advisable for desktop?

Keeping in mind that people generally don’t shrink the browser to the sizes I was on desktop, but I do like that it scales consistently down to such a small browser.

I will read over the Size Settings link you posted.

Regards,
Rhys

[C00P3R (Rhys)]

@Siton_Systems

sorry to bother you, are you able to have a look over my readonly and see if I have done something wrong? When I reduce browser size the image is cropped at the bottom, whereas the reference site image continues to maintain ratio and shrink.

How am I able to achieve this?