I'm currently facing an issue with vertically cropping an image within a div. I've been struggling to make the vertical-align and background-position styles work as intended...
Despite trying various options like vertical-align, background-position, background-position-y, inline background image URL in style, nothing seems to be accomplishing the desired outcome...
The images are loaded from HTML within a js file:
<div class="product-image-wrap" data-slider-quickview="">
<img src="${result[i].images[0].src}" class="variant-image-${result[i].images[0].id}" alt="">
</div>
The CSS code used is as follows:
.product-image-wrap {
overflow: hidden;
border-radius: 8px !important;
padding: 12px;
width: 100%;
height: 170px;
background-position: center, center;
background-repeat: no-repeat;
}
.product-image-wrap .img {
display: inline-block;
width: 100%;
height: 170px;
vertical-align: middle;
}