Streaming live at 10am (PST)

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


#1

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


Proportional Square Images
#2

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 smile

Cheers, Dave


#3

Hi, Dave!

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

Have a nice day! smile

Špela


#4

Hi, Dave!

Me again 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


#5

Hi Špela, sorry for the delay, Could you share the site read-only link: http://help.webflow.com/general/guidelines#how-do-i-share-my-sites-read-only-link, I am happy to take a look and find out what's happening smile

Thanks in advance! smile
Cheers,
Dave


#6

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


#7

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