Html 如何在帧内缩放图像

在我的网页中，我已尝试创建网格类型的图像库。我希望悬停时的图像应在帧内缩放。（示例：）[悬停时的图像在帧内缩放]

.gal{
-webkit列数：3；
/*铬、狩猎、歌剧*/
-moz列数：3；
/*火狐*/
列数：3；
显示：块；
溢出：隐藏；
}
.zoom{
光标：指针；
过渡：所有。5s轻松；
}
.缩放：悬停{
变换：比例（1.2,1.2）；
}
.gal img{
宽度：100%；
填充：7px0；
}
@介质（最大宽度：500px）{
盖尔先生{
-webkit列计数：1；
/*铬、狩猎、歌剧*/
-moz列数：1；
/*火狐*/
列数：1；
}
}

---

只需将

img

元素用

div

包装，并在其上执行

溢出：隐藏

：

.grid {
    overflow: hidden;
}

---

对于第二个问题，您需要使用

背面可见性：隐藏来修复它。阅读更多关于它的信息
将图像包装在容器中并添加
溢出：隐藏到容器

同时从
img
元素中移除填充物，并在容器上设置间距样式


.gal{
-webkit列数：3；
/*铬、狩猎、歌剧*/
-moz列数：3；
/*火狐*/
列数：3；
显示：块；
}
.图像容器{
溢出：隐藏；
利润率：14px0；
}
.zoom{
光标：指针；
过渡：所有。5s轻松；
}
.缩放：悬停{
转换：比例（1.2）；
}
.gal img{
宽度：100%；
}
@介质（最大宽度：500px）{
盖尔先生{
-webkit列计数：1；
/*铬、狩猎、歌剧*/
-moz列数：1；
/*火狐*/
列数：1；
}
}















右侧和中间部分的绝缘线束图像。在缩放时，它们没有正确显示，但在悬停时右侧和中间部分工作不正常