I’m trying to make all modal images a specific height with CSS and give them the object-fit property of cover, regardless of the uploaded image size. I can’t seem to get it to work.
.x-image.x-graphic-child.x-graphic-image.x-graphic-primary{
height:20vw;
width:100%;
margin:0 0 3.5vw 0;
object-fit:cover;
}
Link to page https://grunderlandscaping.com/about-us/our-team/
Hello @daneruef,
Thank you for the inquiry.
You have to apply the object-fit property to the img element and set the overflow of the parent .x-image element to hidden.
Let us know if you need more info.
What is the selector to use for the object-fit property?
Have you tried applying the css in the Element CSS field? You can use “$el” to target the span and “$el img” for the image element inside. You can also set this directly from the Image element.
Set Object Fit to Cover.
Thank you for the clarification. If you can provide the login details in the secure note, we’ll check try to check it further and provide the necessary modification.
Secure note added.
No the logo at very bottom for grant is still not stretching to cover the whole space
Try setting the width of $el x-image img to 300px and height to 20vw or taller. If need more help with this type of modifications, please check out our One service.
