Using CSS object-fit:contain on image leaves blank spaces around it

Question

I have a container image-wrapper and an image inside it.

The container has a fixed height and width. Inside it, the image resolution will be dynamic.

All I am trying to do is to center the image to the container, horizontally and vertically and apply some box-shadow styling to it.

But it leaves a blank space around the image, and it looks weird. Below is the code. It happens same with a vertical image.

.image-wrapper {
  height: 400px;
  width: 400px;
  background-color: rgb(0,200,100);
  padding: 40px;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  box-shadow: 10px 10px 10px red;
}

<div class="image-wrapper">
  <img src="https://via.placeholder.com/500x200">
</div>

I want to have a shadow around the image only, without the spaces. I think I am missing a very simple thing here.

I have tried to add position: relative to the container, but it didn't work.

I tried to search about it by searching something like "css object fit image shadow", "css object fit on image adds spaces" and didn't found anything similar to it.

@TemaniAfif the image should not be cropped from any side. I cannot use it. I was planning on using as a background image but the requirements changed. — Debsmita Paul, Mar 29 '21 at 14:18

Manas Khandelwal · Answer 1 · 2021-03-29T14:19:00.310

1

Remove the height: 100%; and object-fit: contain; from .image-wrapper img

Also, remove height: 400px; from the .image-wrapper.

To centre image use CSS Grid: (btw, it is not required to center in this condition)

display: grid;
place-items: center;

.image-wrapper {
  width: 500px;
  background-color: rgb(0, 200, 100);
  padding: 40px;
  display: grid;
  place-items: center;
}

.image-wrapper img {
  width: 100%;
  box-shadow: 10px 10px 10px red;
}

<div class="image-wrapper">
  <img src="https://via.placeholder.com/500x1000">
</div>

Some useful resources:

edited Mar 29 '21 at 14:19

answered Mar 29 '21 at 13:44

Manas Khandelwal

3,790
2
11
24

No no, the image should not be cropped. It should show the full image inside the container. And also should be center aligned. – Debsmita Paul Mar 29 '21 at 13:47
@DebsmitaPaul Then the image will be not in proper shape! – Manas Khandelwal Mar 29 '21 at 13:48
You see, `object-fit: contain` does exactly the thing, I mean it center aligns the image without distorting it, maintaining it's aspect ratio. It is in proper shape, but not the box-shadow. :( – Debsmita Paul Mar 29 '21 at 13:52
@DebsmitaPaul The image you are using is `500x200` and the size of the box is `400x400`, then how will you make them equal – Manas Khandelwal Mar 29 '21 at 13:52
1

@DebsmitaPaul I have updated it, as you told ... Now the box-shadow is of the size of image – Manas Khandelwal Mar 29 '21 at 13:54
Thank you Manas, yes it does looks exactly as required. But it does not work with a vertical image. You can see it overflowing if you try with a `500x1000` image. – Debsmita Paul Mar 29 '21 at 13:59
@DebsmitaPaul I have updated the answer ! – Manas Khandelwal Mar 29 '21 at 14:19

Anthony Beaumecker · Answer 2 · 2021-03-29T13:58:42.110

1

My solution without cropped and with Flexbox :

.image-wrapper {
  height: 100%;
  width: 500px;
  background-color: rgb(0,200,100);
  padding: 40px;
  display : flex;
  justify-content: center;
  align-items: center;
}

.image-wrapper img {
  width: 100%;
  object-fit: contain;
  box-shadow: 10px 10px 10px red;
}

<div class="image-wrapper">
  <img src="https://via.placeholder.com/500x1000">
</div>

edited Mar 29 '21 at 13:58

answered Mar 29 '21 at 13:48

Anthony Beaumecker

433
2
9

I will give it a try and will give you an update. – Debsmita Paul Mar 29 '21 at 13:53
Hi @AnthonyBeaumecker I tried it, it works fine with this image in the question. But if the image is vertical, say `500x1000` it overflows the container. – Debsmita Paul Mar 29 '21 at 13:57
1

I edited with an image with 1000px in height. It's worked – Anthony Beaumecker Mar 29 '21 at 14:01
1

Yes it does work! Only downside is it has a fixed width. I have to figure out if I can get around this. Thanks again. – Debsmita Paul Mar 29 '21 at 14:06

Omkar Rajam · Answer 3 · 2021-10-24T15:15:48.160

Consider this solution:

As per the requirement,

the container has a fixed height and width. Hence, added the following to class .image-wrapper

      height: 400px;
      width: 400px;

image is to be centred in the container, horizontally and vertically. Hence, added the following to class .image-wrapper

      display: flex;
      align-items: center;
      justify-content: center;

To prevent blank space around the image when box-shadow is added, instead of height and width, added max-height and max-width to the img. This will prevent height and width of the image from going more than 400px parent, and the aspect ratio of the image will also be maintained.

      max-width: 100%;
      max-height: 100%;

Overall, this is the solution:

.image-wrapper {
  height: 400px;
  width: 400px;
  background-color: rgb(0, 200, 100);
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-wrapper img {
  max-width: 100%;
  max-height: 100%;
  box-shadow: 10px 10px 10px red;
}

<div class="image-wrapper">
  <img src="https://via.placeholder.com/500x200">
</div>

<div class="image-wrapper">
  <img src="https://via.placeholder.com/500x1000">
</div>

Using CSS object-fit:contain on image leaves blank spaces around it

3 Answers3