Responsive Images - Browser Size

Design help Custom code
1

Hi all,

I’m struggling with responsive images as backgrounds. We all know that we can either set an entire section with an image background (which is easiest) however, it is very limiting to do that (no chance at doing fancy stuff like blending modes and/or parallex effects).
So I have covered an entire section with an image and applied a blending mode (see picture).

35
352832×1480 423 KB

What I am trying to figure out, is the best way to make this responsive when adjusting the browser window (and later when on mobile devices). Here is a screenshot of an extreme example when one decreases the size of the browser window:

59
591162×1482 243 KB

As you can see, the image adjusts to stay proportional and then creates an “empty” space beneath. It is important at this stage to mention that my section height is fixed at 100vh.

Does anyone have a good way to work around this? I.e. make the image grow in size to prevent the dreaded “empty space” from appearing?

Thanks to everyone who took the time to read this far :slight_smile:

Doug

2

You can use object-fit property to make your images behave like background images while not being background images :slight_smile:

It works like this

  • create your image object, choose an image for it and give it a class of image

  • modify this image’s settings to fill the whole page (width:100%, height:100vh)

  • add embed code (so that you can see the result right in the designer) in which put this:

    <style> .image {object-fit: cover;} </style>

That should do it.

3

Thanks for the great response. It’s almost perfect - the issue now is that when I make the image 100vh, that it squashes the image slightly; which distorts the image of course.
Otherwise, the code worked to solve the issue. Do you know how I can fix this “squashing”.

Thanks dram!

4

Can you please post your read-only link?

6

Dram,
I fixed it! I used Min height 100vh and that solved the stretch issue!
Thanks so much for helping me out with this!

https://preview.webflow.com/preview/webagency-2-0?utm_source=webagency-2-0&preview=7cca88be69ba65c5ce2de3757c8b623d

Here is the link if you wanna take a look :slight_smile:

7

Hm… no it still doesn’t work right. Check smaller breakpoints to see it squished. I’ll look into it out later, see if you can fix it by yourself meanwhile.

9

Ah now I have it. I had temporarily taken the code out.
The solution is: The code you sent above, width 100% and height at max: 100vh

Thanks

10

Actually it was me being inattentive to your layout and you not following my advice to the letter :smiley:

You put custom code into the page settings while I suggested creating an embed element and putting it inside so that you may see the effects right in the designer without publishing. Hence I was unable to see any changes since I didn’t look at the published version! If you do the embed trick you will see the results of styling instantly.

No, you do not need a min height for this to work, just a regular height will do (at least it works for me when I do changes on your read-only)

1 Like
12

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.