https://i.sstatic.net/yPt46.png
Hey there!
I am working on a project using bootstrap 4. I encountered an issue that I can't seem to solve. I placed an image inside a div, set the div's height and width to 200px with overflow hidden. The image within the div is set to be 100% of its height while the div itself has a background color of bg-light and a border of 5px solid black. However, I noticed that the background color spills 1px over the left, top, and right edges of the div, causing the image to also shift by 1px in these directions.
HTML:
<div class="profile-image-container">
<img class="profile-image" src="image.jpg" />
</div>
CSS:
.profile-image-container{
width: 200px;
height: 200px;
border: 5px solid black;
overflow: hidden;
}
.profile-image{
height: 100%;
}