Slider image issues on mobile and tablet?

Design help General
1

Hey guys,

Not sure how to tackle heights and widths and changes to the slider to get my images in proportion and scale down how I want them for mobile and tablet. I’m happy with my slider images on desktop and I’m aware that I should probably create a new set of assets (portrait) for mobile and tablet. Which I will do.

But at the moment they look like this:

59
591598×2244 496 KB

Is there a way I can get them looking more like this:

23
231200×1686 546 KB

Essentially I want to crop them and keep them centrally aligned on mobile and tablet.

Any help would be much appreciated, here’s my read only and live links:

https://somethingfamiliar.webflow.io/projects/valluga

https://preview.webflow.com/preview/somethingfamiliar?utm_medium=preview_link&utm_source=designer&utm_content=somethingfamiliar&preview=cca27db9eefc50ce2aaa7d366b6c8b37&pageId=5d5ac8368602db71779dea84&mode=preview

2

Surely someone can help me with this?

3

A good way to do this is to have the image as a CSS background- rather than an image block.

If you delete your image block in your slider, then add the image as the background image of the slide, then it achieves the below result.

30
30476×1404 52.2 KB

15
152044×1936 623 KB

4

Hey again there!

You really need to give your images a class! The same class. Something like “slider-images” or something like that. Lets use the class “slider-images” for this example.

So remember what we talked about the last time? Same case goes for this.

.slider-images {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

If you give all images in your slider the class “slider-images” and adds this CSS inside your style tag in your header, then it will work. Easy as that.

Never settle for background images. :v:

Cheers mate.

5

What’s wrong with background images?

6

Well, nothing is “wrong” with it. But not using background-images can open up for a lot more options in my experience.

7

Oh god- I thought there was something inherently wrong with them. I always use them because I use different images for different size breakpoints, allowing faster loading times on smaller devices - which often use 4G/3G instead of WiFi.

Should I be changing my ways?

8

This is awesome, it’s worked, but all the images are now really pixelated in mobile view? Any idea why that is?

9

No no, no need for that! I just like the freedom it provides in my designs. It’s not like the same things cant be obtained with using background-images. But i always felt like using img tag and adding “object-fit” gives me more control then using background-images.

10

Sorry, actually i don’t see why it should do that. :upside_down_face:

But your images are HUGE. Maybe you should try to optimize for better loading and so on.