我正在用html，css(flexbox(制作一个图片库。问题是，当我在图像上使用属性时，div 中的图像在 mouser 悬停时会晃动object-fit: cover。
<!-- 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>
尝试使用不同的代码运行代码，但没有看到图像闪烁/晃动。 闪烁/抖动可能是由于悬停前后图像的纵横比不同。 按如下所示添加悬停 CSSobject-fit: cover可能会解决您的问题。
.img-sqr:hover {
box-shadow: 3px 3px 5px 3px #ccc;
transform: scale(1.03);
object-fit: cover;
}
您可以在此处阅读有关对象适合 CSS 属性的更多信息。
从 img-sqr：hover 中删除转换属性