图像超出父 div 的填充区域答案

【问题标题】：The image exceed to the padding area of the parent div图像超出父 div 的填充区域
【发布时间】：2017-02-08 14:48:04
【问题描述】：

我正在尝试制作缩略图。这是 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 的填充区域？我在下面附上一张照片，希望我说得足够清楚，以便有人能理解我想说的话！谢谢！

【问题讨论】：

标签： html css twitter-bootstrap modal-dialog responsive

【解决方案1】：

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

第一个选项

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

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

【讨论】：

但是为什么img超过了parent的padding呢？
@hayley 因为 HTML 的工作方式是溢出的内容不会被填充剪切，它会从边框开始向外剪切。如果您不希望图像通过填充，则必须使用 max-width 和 max-height to 100% 或使用容器将其包含在父级的内容框中。

【解决方案2】：

你想要的是

.product-preview img{
  max-width: 100%;
  height: auto; /* instead of height: 100%; */
}

并尝试使用具有相同宽度和高度的图像，这样您就不会遇到任何问题

【讨论】：

我的情况是我无法确定用户上传的图片的大小。为了适应图像垂直的情况，我将高度设置为 100%。

【解决方案3】：

想到的第一个简单解决方案是您可以在父元素上使用overflow: hidden;。
但是，如果您希望您的图片在缩略图上完全可见，您可以将此代码用于您的图片标签
{ width: 100%; object-fit: cover; }

【讨论】：