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

【问题标题】：Background image in div is not taking entire viewdiv 中的背景图像没有占据整个视图
【发布时间】：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>

【问题讨论】：

标签： html css reactjs web jsx

【解决方案1】：

在这种情况下，您可以将 backgroundSize (https://www.w3schools.com/cssref/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

【讨论】：