Object-fit does not cover the entire containing area

Question

The image does not cover the containing area completely (you can see that little teal strip at the bottom.)

Why is that? and what can I do in so that the image can cover the div completely?

div {
  width: 300px;
}

.container {
  width: 100%;
  background-color: teal;
}

img {
  max-width: 100%;
  object-fit: cover;
}

<div>
  <div class="container">
    <img src="https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png">
  </div>
</div>

Mahatmasamatman · Accepted Answer · 2020-02-22T00:53:34.060

Add display: block; to your image.

img{
    max-width: 100%;
    object-fit: cover;
    display: block;
}

As an alternative, you can add font-size: 0px; to your .container class.

The issue is not with Object-fit rule, the issue is with display: inline-block rule which adds unnecessary whitespace to HTML. The way to fix it is to either convert the element to display: block, or to give the parent of the element font-size: 0px, so the whitespace 'takes no space'.

You can read a bit more about it here:

https://davidwalsh.name/remove-whitespace-inline-block

Object-fit does not cover the entire containing area

1 Answers1