Я создаю галерею изображений, используя html, css (flexbox). Проблема заключается в том, что изображения внутри div дрожат во время зависания, когда я использую свойство 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>