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.
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)