HTMLCSS 常见布局要求（持续更新...）

图片作为背景非 background-image 属性实现

HTML

<section class="product-block">
  <div class="product-bg">
    <img src="imgUrl" alt="">
  </div>
</section>

CSS（less）

.product-block {
  position: relative;
  .product-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; 
    img {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
  }
}