Image "Cover" div (but not as background)

Design help General
1

I’m pretty sure this impossible but thought I’d ask.

I like that a background image in a div can be set to “cover”, filling the height or width while cropping and not distorting the image, but for dynamic content I’m needing it to be an image placed in a div that’s set to “overflow hidden”.

Since the images feeding into the space are of various proportions, it would be great if the image could react with a “cover”-like property. Either filling 100% height (for more horizontal images) or 100% width (for more vertical images). And crop to center. It can almost be done using flexbox but the images get smashed or stretched.

As far as I can tell this isn’t possible. Any tricks?

Posted my share link below. This is the published page and the area in question is the “Featured Properties” images.
http://ellington-realty-group.webflow.io/

If you reduce the browser width you’ll see the magenta background of the div that I’d like to fill.

Here is my public share link: https://preview.webflow.com/preview/ellington-realty-group?preview=56ddc38999d80607537ceeb4d7ed9e83
(how to access public share link)

2

First problem:
Remove the CSS from the img (or use bigger images!):
max-width: 100%
CSS max-width property to 100% → image will fill the width of it’s parenting element, but won’t render larger than it’s actual size (in your example this is why we see the “magenta background” - your images are small <300px)

in responsive the code is:

.responsive-img{
width: 100%;
height: auto;
}
  • Now if you want to make a CROP:*
  • Option one- Photoshop: Crop thus images manually (photoshop or any other way) - the safe way.
  • Option two - two styles: Create two styles (.horizontal , and .vertical) and play with this.
  • Option three - overflow hidden: Make the image center-center (with flex and overflow hidden trick) - or any idea like this. But if the image have faces and stuff like this, you can not be 100% sure you dont crop face or important stuff.

And also you have this CSS trick:

And this stackoverflow:
https://stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container
https://stackoverflow.com/questions/17320587/resize-to-fit-image-in-div-and-center-horizontally-and-vertically

3

Thanks so much for your thoughtful reply.

  1. I didn’t have any css applied to the images

CSS Tricks “Object Fit” is the concept I’m trying to achieve (but wished to achieve in Webflow Designer. Doesn’t appear possible. Adding to wish list:)

Photoshop isn’t an option since all images are feeding in from a large database, utilizing all kinds of image sizes and ratios.

I’ll ended up going with background images using “cover” as my sample but will tell my backend developer to use the “Object fit” class on the database integrated site.

Thanks again!

4

This decleration is from your code (original code)
max-width: 100%

From SEO aspect its better to use img (with alts) than empty divs with bg images + accessibility (If someone turn off CSS or use READ mode he will see “nothing” for the images) + W3C + Better/readable DOM

You welcome :slight_smile:

5

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