Streaming live at 10am (PST)

Background image vs Image for responsive site


#1

Hi,

Is there a way for an image to behave in a similar way as a background image? As in croping the image depending on viewport but keeping full height?

I have a full screen slider and I like the way the background image resizes depending on desktop screen size. Tablet is allright as well. Phone is a different story, but I think I know what to do.

If I remove the background image and insert an image into the slide, it resizes the whole picture and the height does not cover the whole of the slider. Or if the height is 100% then the width shrinks.... And that's only for desktop view..

Trying to do this for a few days but can't figure out how....

Thanks for your help.

sessionone


Here is my public share link: LINK
(how to access public share link)


#2

It's very difficult and somehow hazardous because HTML never knows the aspect ratio of an image. Easily doable with script though.

You can check various solutions here: http://stackoverflow.com/questions/1891857/how-do-you-stretch-an-image-to-fill-a-div-while-keeping-the-images-aspect-rat/1892815

In Webflow, try to give the container overflow hidden then select the image, add a class and try higher values in % in width and max-width (same value for all try 200%). Also add max-height 100% and play with displacement. I couldn't find a rule where any kind of image fill the div.


#3

Hi,

Sorry, took a while to get at this. Thanks, but I still can't get the images to work like the background image.

Thanks anyway.

sessionone


#4

Hi @sessionone, if you were to share the read-only site link, it will be a lot easier to see how the image fits in your design: http://help.webflow.com/faq/how-do-i-share-my-sites-read-only-link

If you still would like some help with this, please let us know :slightly_smiling:


#5

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