'How to get box shadow on image with using "object-fit: contain;"?

I would like to work with this:

img {
  width: 200px;
  height: 300px;
  object-fit: contain;
  box-shadow: 0 0 30px red, 0 0 30px red;
}
<div>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Felis_catus-cat_on_snow.jpg/220px-Felis_catus-cat_on_snow.jpg">
</div>

But the box-shadow should be directly on the image and not at the border of the image container. I have tried it with drop-shadow(), but then I can't add the effect twice. Is there any other way to fix that?

css


Solution 1:[1]

I think this is what you need

body{
    display: grid;
    place-content: center;
    position: relative;
}

.container{
  width: 220px;
  height: 300px;
  display: flex;
  justify-items: center;
  align-items: center;
  border: 1px solid blue;

}

img {
  width: 220px;
  height: 147px;
  object-fit: cover;
  box-shadow: 0 0 30px red, 0 0 30px red;
}
<div class="container">
      <img
        src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Felis_catus-cat_on_snow.jpg/220px-Felis_catus-cat_on_snow.jpg"
      />
</div>

Solution 2:[2]

try this:

img {
      width: 200px;
      height: 300px;
      object-fit: contain;
      filter: drop-shadow(0 0 30px red) drop-shadow(0 0 30px red);
    }
<div>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Felis_catus-cat_on_snow.jpg/220px-Felis_catus-cat_on_snow.jpg">
</div>

You can add multiple filters but you must add them one by one. To use drop-shadow multiple times, you have to add each shadow at its own drop-shadow.

Solution 3:[3]

Could try something like this also.

.wrapper>div {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Felis_catus-cat_on_snow.jpg/220px-Felis_catus-cat_on_snow.jpg');
  height: 150px;
  width: 200px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 30px red, 0 0 30px red;
}

.wrapper {
  padding: 40px 0;
  outline: dotted black 1px;
  width: fit-content
}
<div class="wrapper">
  <div></div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 UPinar
Solution 2 Quasipickle
Solution 3 Kameron

Related Questions