The image exceed to the padding area of the parent div - html

Question

I'm trying to make thumbnails. Here's the HTML code:
<div class="product-preview">
<div data-img-url="images/image7.jpg" class="p-thumbnail">
<img src="images/image7.jpg" />
</div><div data-img-url="images/image8.jpg" class="p-thumbnail">
<img src="images/image8.jpg" />
</div><div data-img-url="images/image9.jpg" class="p-thumbnail">
<img src="images/image9.jpg" />
</div><div data-img-url="images/image10.jpg" class="p-thumbnail">
<img src="images/image10.jpg" />
</div>
</div>
And css
.product-preview {
margin-left: -5px;
margin-right: -5px;
}
.product-preview .p-thumbnail {
height: 120px;
width: 25%;
display: inline-block;
padding: 10px 5px;
overflow: hidden;
}
.p-thumbnail img {
height: 100%;
display: block;
margin: 0 auto;
}
How to fix so that the the img will not exceed to the padding area of .p-thumbnail? I attach a photo below, hope I make clear enough so that someone can understand what I'm trying to say! Thanks!

Answer 1

It's because overflow property will only hide the child of the element from the border and outwards. If you want to limit your image not to exceed the content box, you have to put some inner container or make the image to contain.
First Option
<div data-img-url="images/image7.jpg" class="p-thumbnail">
<div class="imgcover">
<img src="images/image7.jpg" />
</div>
</div><div data-img-url="images/image8.jpg" class="p-thumbnail">
<div class="imgcover">
<img src="images/image7.jpg" />
</div>
</div><div data-img-url="images/image9.jpg" class="p-thumbnail">
<div class="imgcover">
<img src="images/image7.jpg" />
</div>
</div><div data-img-url="images/image10.jpg" class="p-thumbnail">
<div class="imgcover">
<img src="images/image7.jpg" />
</div>
</div>
With additional CSS
div.imgcover{
width: 100%;
overflow: hidden;
}
If you want your image to be centered on the imgcover div you can use
.p-thumbnail{
position: relative;
}
.p-thumbnail img {
max-height: 100%;
max-width: 100%;
display: block;
margin: 0 auto;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
Second Option
Change the style of the image to this to emulate object-fit: contain
.product-preview .p-thumbnail {
height: 120px;
width: 25%;
display: inline-block;
padding: 10px 5px;
overflow: hidden;
text-align: center;
}
.p-thumbnail img {
max-height: 100%;
max-width: 100%;
display: block;
margin: 0 auto;
}

Answer 2

what you want is
.product-preview img{
max-width: 100%;
height: auto; /* instead of height: 100%; */
}
and try to used images with same width and height so you dont have any problem

Answer 3

The very first simple solution that comes to mind is that you can use a overflow: hidden; on the parent element.
But if you want your image to fully be visible on the thumbnail you can use this codes to your image tag
{
width: 100%;
object-fit: cover;
}