javascript - 垂直对齐和背景位置 CSS 不适用于 JS

Question

我试图在 div 中垂直裁剪图像，但在注册和工作 vertical-align 和 background-position 样式时遇到了问题...

我试过使用 vertical-align、background-position、background-position-y，我试过在样式中内联调用背景图片 url，但没有任何工作正常......

图像在 js 文件中的 HTML 中被调用:

<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>

CSS 如下:

  .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;
       }

Answer 1

不确定我是否理解您想要实现的目标，也许您想更改包装器的高度但包含图像的纵横比？在这种情况下，您可以在图像上使用 object-fit: cover;，然后您可以自由更改包装器 div 的高度:

div {
    overflow: hidden;
    border-radius: 18px;
    padding: 12px;
    width: 100%;
    height: 170px;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div>
  <img src="https://www.petmd.com/sites/default/files/Acute-Dog-Diarrhea-47066074.jpg">    
 </div>