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放在容器上而不是图像上：

＆＃13;

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

＆＃13;

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

＆＃13;

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>

图像悬停效果错误

3 个答案: