html - 为什么当我将鼠标悬停在图像 div 上时我的图像会抖动
问题描述
我正在使用 html、css(flexbox) 制作图片库。问题是当我在图像上使用object-fit: cover
属性时,当鼠标悬停时,div 内的图像会抖动。
<!-- language: lang-css-->
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
img {
width: 250px;
height: 200px;
**object-fit: cover;**
}
.header {
font-family: 'Kaushan Script', cursive;
}
.wrapper {
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.img-gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: 70vw;
align-items: center;
}
.img-sqr {
box-shadow: 0px 0px 10px #ccc;
margin: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
transition: all 0.2s;
padding: 20px;
}
.img-sqr:hover {
box-shadow: 3px 3px 5px 3px #ccc;
transform: scale(1.03);
}
.img-sqr span {
font-family: 'Sigmar One', cursive;
}
<body>
<div class="wrapper">
<div class="header">
<h1>Collections</h1>
</div>
<div class="img-gallery">
<div class="img-sqr" id="sqr5">
<div class="img-div"><img src="images/converse-upsidedown.jpg" alt="" class="img"></div>
<span class="name">Upsidedown</span>
</div>
<div class="img-sqr" id="sqr6">
<div class="img-div"><img src="images/food-unsplash.jpg" alt="" class="img"></div>
<span class="name">Food</span>
</div>
<div class="img-sqr" id="sqr7">
<div class="img-div"><img src="images/friendshipunsplash.jpg" alt="" class="img"></div>
<span class="name">Friendship</span>
</div>
<div class="img-sqr" id="sqr8">
<div class="img-div"><img src="images/hot-air-baloons-outdoor.jpg" alt="" class="img"></div>
<span class="name">Outdoor</span>
</div>
<div class="img-sqr" id="sqr12">
<div class="img-div"><img src="images/reflectionunsplash.jpg" alt="" class="img"></div>
<span class="name">Reflection</span>
</div>
</div>
</div>
</body>
解决方案
尝试以不同的方式运行您的代码,但没有看到图像闪烁/抖动。闪烁/抖动可能是由于悬停前后图像的宽高比不同。如下添加object-fit: cover
悬停 CSS 可能会解决您的问题。
.img-sqr:hover {
box-shadow: 3px 3px 5px 3px #ccc;
transform: scale(1.03);
object-fit: cover;
}
您可以在此处阅读有关 object-fit CSS 属性的更多信息。
推荐阅读
- ios - React Native 中“将一个原始像素扩展到多个像素”是什么意思?
- javascript - jQuery 仅在 div 不为空时追加
- pycharm - 是否有在 PyCharm 中插入 {%%} 的快捷方式?
- c# - Visual Studio 推荐使用命令简化
- android - 在按钮上调用键盘删除/退格操作?
- php - 将变量传递给 CURL 对象 (POST)
- assembly - 当一段代码被编译和运行时,计算机内部会发生什么
- javascript - 点击 JavaScript 获取类名值
- html - 使用 flexbox 定位网格
- flutter - 限制颤振应用程序的方向