div 中的背景图像没有占据整个视图

Posted 2023-02-22

【中文标题】div 中的背景图像没有占据整个视图

【英文标题】：Background image in div is not taking entire view

【发布时间】：2021-01-18 19:12:57

【问题描述】：

我正在开发一个电子商务平台。如果所有总计数为零，我必须在产品图像上显示SoldOut 图像。这是我的售罄产品的 CSS。

  &__imageSoldOut 
    background-color: green;
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 15rem;
    object-fit: cover;

    img 
      object-fit: contain;
      max-width: 70%;
    

    @media (max-width: $small-screen) 
      height: 210px;
    
  

我希望我的产品图片在背景中覆盖整个视图，就像左侧的可用产品一样，只有售罄的图片显示为叠加，这里的绿色视图将被背景图片覆盖。 这是我的反应 jsx

        <div
          className="product-list-item__imageSoldOut"
          style=
            backgroundImage: `url($(product.thumbnail.url &&
              product.thumbnail.url) ||
              "images/no-photo.svg")`,
          
        >
          <img src=soldOutThumb />
        </div>

【参考方案1】：

在这种情况下，您可以将 backgroundSize (https://www.w3schools.com/cs-s-ref/css3_pr_background-size.asp) 设置为高度的 100%，以免图像倾斜或同时填充宽度和高度

       <div
          className="product-list-item__imageSoldOut"
          style=
            backgroundImage: `url($(product.thumbnail.url &&
              product.thumbnail.url) ||
              "images/no-photo.svg")`,
            backgroundSize: "auto 100%"
          
        >
          <img src=soldOutThumb />
        </div>

背景尺寸：“[宽度] [高度]”

【讨论】：

这仅适用于square div。如果它是一个宽 div，那么绿色将出现在左侧。但在这种情况下，这没关系。

也忘了说！如果重复打开，则图像将被重复。

【参考方案2】：

在您的 JSX 中，删除 backgroundImage 并使用 background 并将 url() 与 cover 一起写入。 cover 样式将通过缩放图像和裁剪/裁剪溢出来填充 div。

在代码中应该是这样的：background: url() cover

【参考方案3】：

试着给它flex:1也试试object-fit: fill