圖像不良懸停效果

Question

我有四個同樣大小的圖像，都設置爲水平排列的頁面

<div class="portrait"> 
    <img src="#"> 
</div> 
<div class="portrait"> 
    <img src="#"> 
</div> 
<div class="portrait"> 
    <img src="#"> 
</div> 
<div class="portrait"> 
    <img src="#"> 
</div> 

在我的網站的20％的寬度。懸停時，我想讓圖像放大原始邊框（如https://codepen.io/math2001/pen/zZXBbj?editors=1100），這是我通過CSS3過渡和溢出完成的：hidden。

.portrait { 
float: left; 
width: 20%; 
overflow: hidden; 
} 
.portrait img { 
width: 100%; 
transition: transform 0.2s linear; 
} 
.portrait img:hover { 
transform: scale(1.1); 
} 

圖像的寬度不會超過縱向的原始20％約束，但高度確實如此。我知道問題在於對包裝div的高度沒有固定的約束，但我不知道如何創建一個，因爲所有東西都是按比例縮放的。我怎樣才能解決這個問題？

Answer 1

把transform在容器上，而不是像：

.portrait { 
 
    float:left; 
 
    width:20%; 
 
    overflow:hidden; 
 
    transition:transform 0.2s linear; 
 
} 
 
.portrait img { 
 
    width:100%; 
 
} 
 
.portrait:hover { 
 
    transform: scale(1.1); 
 
}

<div class="portrait"> 
 
    <img src="http://placehold.it/250x250"> 
 
</div> 
 
<div class="portrait"> 
 
    <img src="http://placehold.it/250x250/000/ccc"> 
 
</div> 
 
<div class="portrait"> 
 
    <img src="http://placehold.it/250x250/aaa/eee"> 
 
</div> 
 
<div class="portrait"> 
 
    <img src="http://placehold.it/250x250/ccc/fff"> 
 
</div>

Answer 2

你有沒有嘗試使用更大的定義規模。例如：

.portrait:hover img { 
    transform: scale(1.4); 
} 

Answer 3

您需要設置img到display:block;

.portrait { 
 
    float: left; 
 
    width: 20%; 
 
    overflow: hidden; 
 
} 
 
.portrait img { 
 
    display: block;      /* added property */ 
 
    width: 100%; 
 
    transition: transform 0.2s linear; 
 
} 
 
.portrait:hover img { 
 
    transform: scale(1.4); 
 
}

<div class="portrait"> 
 
    <img src="http://placehold.it/250/f99"> 
 
</div>