Streaming live at 10am (PST)

Resizing images for mobile

Im trying to make my images responsive by setting a max width of say 1000px and setting the width itself to 100%, then once when on mobile i set it to say 60%, but instead of scaling the entire image to 60%, it just cuts in half? Anyone else experience this?

Appreciate any help i can get.


Here is my site Read-Only: https://preview.webflow.com/preview/datagoose?utm_medium=preview_link&utm_source=designer&utm_content=datagoose&preview=7629ee75e856116dbcbc9339286e1a84&pageId=5f3b9ac9aa9f164bd235287c&itemId=5f3b9ac9aa9f16d9003528ab&mode=preview

Hey @Danieljpcampbell

If I understand correctly, you want the blog image to size down as your page sizes down, and to hide any height overflow, but keep the full width always?

To accomplish this, I usually put my image within another div that does the cropping.


Set the Parent Div to Flex and Center Align and Justify.
Set your height. You can adjust this on each break point to ensure it fits properly.
Set overflow to hidden

On your image div, set your max and min width to 100%
image

And make sure your background image is centered.

Hopefully that helps, or at least points you in the right direction.