Within my image-wrapper container, I have an image with a variable resolution.
The container itself has fixed dimensions for height and width. My goal is to center the image within the container both horizontally and vertically while adding a box-shadow effect.
However, upon applying the styling, I noticed that there is unwanted blank space surrounding the image which appears odd. The issue persists regardless of whether the image is horizontal or vertical in orientation.
.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 aim to achieve a shadow effect around the image exclusively, without any additional spacing. It seems like there might be a simple solution that I am overlooking.
Attempts such as adding position: relative to the container did not yield the desired result.
In my search for solutions, queries like "css object fit image shadow" and "css object fit on image adds spaces" did not lead me to resources addressing this specific issue.