Object-fill CSS/HTML

  • 30 July 2021
  • 3 replies

Badge +2

I see when uploading an image in either a split block or an image block, the image style is set to “fit/contain” to container/block rather than “fill/cover”. How can I ensure the image fills/covers the container/block?

The problem I am facing is no matter if I set a max width or check “fill image area”, if the image is wider than the container it still remains at a fit/contain state.

I need it to “fill/cover” the container/block.


Best answer by David To 30 July 2021, 22:55

View original

3 replies

Userlevel 7
Badge +60

Hello @orbxdelrey,

Thanks for sharing your experience with the Klaviyo Community!

When importing an image to a Klaviyo block such as an image, table, or split block, the images will always be contained within the block. 

I would also suggest removing any padding you may have while enabling the “fill image area” to allow the image to fill as much of the block space as possible. If you are importing an image that is wider that the container, Klaviyo will automatically optimize it to fit within the container. I would also recommend taking a look at the How to Use Images in Emails and MMS Image and GIF Best Practices Help Center Articles to learn more about using images within Klaviyo and for some best practice recommendations. 

I’ve also included some Community posts along the same subject that other Community members have found helpful that may be of use to yourself below:

I hope this helps!


Badge +2

Typical response.That did not answer my question.

Userlevel 7
Badge +60

Hey @orbxdelrey,

Another potential solution available to you outside of using an image, table, or split block, would be importing an image through the source code of a text block. Doing so will offer you more control over the image size by editing it via HTML. You can find instructions on how to import an image using a text block from the How to Insert an Image into a Text Block Help Center Article. 

I hope you have a great day!