Hi there,
Can someone help me understand how to fix this styling issue. Is it my image or am I not using the fill correctly?
Here is my site Read-Only: Webflow - The Attributes
Image elements by default limit themselves to a max-width of 100%, so if the image dimensions are smaller than the container they won’t fill all the way:
The image itself has a width of 444px but on larger screens the card element gets larger than that (as shown in your screenshot).
If you remove the max-width property the image will scale itself properly to fill the entire container — just note that the image itself appears to have some transparency on the right side so it appears to still have a gap even though it’s 100% of the container width:
Hey @mikeyevin, thanks for that tip. I update the image because I need it to be horizontal, but I actually want the image to be contained by this wrapper and scale automatically. Any thoughts on how to do that?
Similar to the original issue, any image by default is going to retain its default aspect ratio unless you provide style overrides saying it shouldn’t.
Adding a height of 100% allows it to fill the container — just make sure you also set the Fit property to cover or else the image is going to be skewed:
