html - 错误的图像悬停效果

Question

我有四个大小相同的图像，都设置为页面宽度的 20%

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

在我的网站中水平对齐。悬停时，我希望图像在原始边框内缩放(如 https://codepen.io/math2001/pen/zZXBbj?editors=1100 )，这是我通过 CSS3 过渡和溢出:隐藏实现的。

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