圖片超出父div的填充區域

Question

我正在嘗試制作縮略圖。 這是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的填充區域？ 我在下面附上一張照片，希望我說得足夠清楚，以便別人可以理解我的意思！ 謝謝！

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

第二選擇

將圖像的樣式更改為此以模仿對象適合度：

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

Answer 2

我想到的第一個簡單的解決方案是可以使用overflow: hidden; 在父元素上。
但是，如果您希望圖像在縮略圖上完全可見，則可以將此代碼用於圖像標簽
{ width: 100%; object-fit: cover; }

Answer 3

你想要的是

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

並嘗試使用相同寬度和高度的圖像，這樣您就不會有任何問題