html图片可溢出div,html - 图片超出父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;

}