html - 图片超出父div的填充区域

我正在尝试制作缩略图。这是HTML代码：

<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>

和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;
}

如何修复，使img不会超过.p-thumbnail的填充区域？我在下面附上一张照片，希望我说得足够清楚，以便别人可以理解我的意思！谢谢！

最佳答案

这是因为溢出属性只会从边界和外部隐藏元素的子元素。如果要限制图像不超过内容框，则必须放置一些内部容器或使图像包含在内。

第一选择

<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>

与其他CSS

div.imgcover{
    width: 100%;
    overflow: hidden;
}

如果您希望图像以imgcover div为中心，则可以使用

.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%);
}

第二选择

将图像的样式更改为此以模仿对象适合度：

.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;
}