这是因为溢出属性只会从边界和外部隐藏元素的子元素。 如果要限制图像不超过内容框,则必须放置一些内部容器或使图像包含在内。
第一选择
与其他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;
}