Help me understand "fit" with CSS and images

Design help Custom code
1

I am developing a page for my website that displays artwork images. The images are loaded dynamically (using JavaScript setInterval() method every 2 seconds for testing purposes). The images themselves are stored in the Uploadcare Amazon server, but they are basically URLs like this one my Fredric Remington:

or this:

or this

So an artist will upload images onto the website with widely different aspect ratios and sizes.

See them displayed here: gallery concept

In the HTML I have a div within a div. I don’t understand from Webflow Univ how the fit property works to achieve the end result I want.

The child div (with the ‘hero’ image) has a URL as above. The parent div CSS provides stability on the page with width and height properties.

I would like the the images (in the child) to be contained within the parent div and scaled down if needed so they don’t bleed out beyond the the parent div. If you run through the demo above, you will see most behave nicely. But some “children” are unruly and bleed down outside the parent.

I can not tell if this is something I can address with CSS, or with Uploadcare in the structure of the URL.

(I’ll be posing this question to them as well.)

read only link:
https://preview.webflow.com/preview/helps-austin-project-9b22c7?utm_medium=preview_link&utm_source=designer&utm_content=helps-austin-project-9b22c7&preview=454984bc0992fefc4eb788f0bcda7382&pageId=632ed4d38294532927ed86f1&workflow=preview

2

hi @David_Richardson the easiest way is to add custom class to code you generate.

CleanShot 2022-10-11 at 02.08.42
CleanShot 2022-10-11 at 02.08.421069×459 52.9 KB

then you can assign properties to this class with custom code that will have effect on image.

custom code snippet

.img-preview{
   width: 100%;
   height: 100%;
   object-fit: cover;
}

For now you are assigning object-fit to image wrapper/holder that do not have effect on image so you should remove it.

Hope this will solve your request

1 Like
3

Hi Stan
Thanks for your suggestions. They did work and the URL you shared offered some additional insight into other image CSS attributes. This stuff is tricky.
Cheers

1 Like
4

hi @David_Richardson Im glad you have find source helpful to clarify basics about object-fit and you have make it work. If you do not have further questions related to your request feel free close request as solved. :wink: