我正在尝试制作缩略图。这是 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 的填充区域?我在下面附上一张照片,希望我说得足够清楚,以便有人能理解我想说的话!谢谢!
最佳答案
这是因为 overflow 属性只会从边框向外隐藏元素的子元素。如果你想限制你的图像不超过内容框,你必须放一些内部容器或使图像包含。
第一个选项
<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%);
}
第二个选项
将图像的样式更改为此以模拟 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;
}
关于html - 图片超出父div的padding区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42106000/