Description
I’m trying to make my image embed with my URL scale to cover. I’ve read up a little and I am just looking to chat with someone who ahs done this before and can guide me the right direction.
Site URL
Required: Please provide a staging/production URL where we can see the issue
Expected Behavior
I expect the images to fit inside the image wrapper without squishing or stretching.
Actual Behavior
[Portrait Images squished]
Video/Screenshots
NDA Notice: If you’re under an NDA, please feel free to send us a Direct Message/Email with the above information.
Hey @zerogravitykyle!
Looking at your site and screenshots, I see your images are getting squished when they don’t match the container aspect ratio. This happens when you have varying image shapes (portrait/landscape) inside fixed-dimension containers.
The solution is to apply object-fit: cover directly to your <img> element:
<img src="{{IMG_SOURCE}}} style="width:100%; height:100%; object-fit:cover; display:block;">
This approach:
- Fills the container completely while maintaining the image’s aspect ratio
- Crops excess portions rather than distorting
- Works consistently with both portrait and landscape images
- Keeps the image as a real
<img> (better for accessibility and SEO)
- Lets Webflow continue serving optimized image sizes
If you need finer control over which part of the image stays visible, you can also add:
object-position: center; /_ or top / bottom / left / right _/
This way you get a clean, responsive setup without stretching or squishing your images.
If you need further help implementing this, @Support-Luis or @Support-Pedro can provide additional assistance.
1 Like
