Images not fitting to container when re-sizing the browser window

Design help General
1

I need some help, I have created series of containers in which I have set their overflow to hidden. My greatest issue is that am avoiding background image for each of the container, so that it would be easy for me to plug it into dynamic content after exporting out WF. When I resize the browser window, their seems to be a gap at the bottom. Is this as a result of some missing queries? Or Is this the default performance of webflow or is there something I should or should have done.

Please find below the screenshot: http://awesomescreenshot.com/0933p7tn9b

This is the public link: https://webflow.com/design/myastymin?preview=74b8bf8881a0e811469af6ad7808e8e4

Will appreciate your help. Thanks.

2

put your image as a background of the div and select the cover option, then adjust http://cl.ly/image/073b2q3v2U37

3

My greatest issue is that am avoiding background image for each of the container,

Thanks Vincent, is there no other way than to make the image a background? My experience going that route, is that it is very tedious managing the project in the future, as a slight change in one page of the site would result in updating the entire site, because of the way webflow handles css. There is no support for page css and that is hell of a work!

4

I’ve been trying to do this and avoid background for the exact same reasons. I want to take time to make it work but I didn’t yet.

5

Vincent, I have been able to re-create it without using background-image. I simply made the container height auto while setting overflow to hidden so that the excess can be clipped. However, I noticed the issue is with the slider widget. WF slider won’t support auto height or the slider cannot fill the in-between media queries (Bug maybe or oversight?) Nevertheless what I did was to make the slider height 100%.

1 Like