How to keep the same proportion of square image in responsive design?

Hi,

how can I keep square proportion of images in responsive design like in this website shown below?

http://lapfour.com/#about

Thank you,

have a nice day,

Špela

Hi @sspela, thanks for your post. First make sure all your images are the same dimension. Then check out my example video to see if this solution will work for you. If not, let me know and I am happy to assist further :slight_smile:

Cheers, Dave

1 Like

Hi, Dave!

Thank you so much for your kindness and help! :slight_smile: I will try this out and let you know if it works.

Have a nice day! :smile:

Špela

Hi, Dave!

Me again :slight_smile: It works. But now I don’t know how to make HOVER EFFECT over those images, because when I use another div block to put it over images or div block “IMAGE BOX”, it covers bigger area than image size.

Now it is like this

and now I want to do this…

Thank you and have a nice day! :blush:

Špela

Hi Špela, sorry for the delay, Could you share the site read-only link: Learn web design with free video courses and tutorials | Webflow University, I am happy to take a look and find out what’s happening :slight_smile:

Thanks in advance! :slight_smile:
Cheers,
Dave

Hi, Dave!

No problem :blush: Here is link to my website (hope I did this correctly)! :smile:

https://preview.webflow.com/preview/rumena?preview=657f67c75027679c3fabf2254e1edd62

THANK YOU and have a nice day!

Špela

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