如何使图像适合div

Question

如何使用图片作为div的背景？

I want to make this image as background

and the result i got is like this

这是我的代码

 <s.Container
        ai={"center"}
        style={{
          backgroundImage: "url(" + "/config/images/bg2.png" + ")",
          backgroundPosition: "center",
          backgroundSize: "cover",
          backgroundRepeat: "no-repeat",
          position: "relative",
        }}
      > </s.Container>

Answer 1

当您使用background-size:cover; 时，它将覆盖它所在的整个可见区域，同时保持纵横比，如果需要，它会溢出，这就是它正在做的事情。它需要填充的容器大小与您使用的图像的纵横比不同。我不确定这是否是您需要的（最不可能），但您可以尝试background-image: contain;。这包含图像到空间，尊重图像的纵横比，但不保证完全填充空间顶部/底部/左侧/右侧。

您可能需要采取的方法是使用两个单独的背景图像与伪元素相结合。顶部和底部的图像条（顶部将正面朝上，底部将是相同的图像，但使用：transform:scaleY(-1); 垂直翻转。第二张图像将是中间部分的一部分，您可以使用 background-repeat:repeat-y; 垂直重复。

您肯定需要对其进行调整以适应您的项目，但这是我将采用的方法。这取决于它将容纳的内容，您需要它的宽度。

.window {
  width: 300px;
  display: block;
  position: relative;
  padding: 1rem 2rem;
  left: 2rem;
  top: 2rem;
  background-size: 100% 30px;
  background-repeat-y: repeat;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAiYAAAASCAYAAABvuhXUAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAhGVYSWZNTQAqAAAACAAFARIAAwAAAAEAAQAAARoABQAAAAEAAABKARsABQAAAAEAAABSASgAAwAAAAEAAgAAh2kABAAAAAEAAABaAAAAAAAAAEgAAAABAAAASAAAAAEAA6ABAAMAAAABAAEAAKACAAQAAAABAAACJqADAAQAAAABAAAAEgAAAAAmvTidAAAACXBIWXMAAAsTAAALEwEAmpwYAAABWWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNi4wLjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgoZXuEHAAABMklEQVR4Ae3WsQ3CQBREwTMEboEA0QFURHE0xxUABdiJaWC1ERondrJf8kRvGcfzvF2333fyftwvY13PydSGAAECBAgQ+AOB9/yMOb/xn2xjeZ3itSEBAgQIECBAoCwgTMqgzhEgQIAAAQK5gDDJ7SwJECBAgACBsoAwKYM6R4AAAQIECOQCwiS3syRAgAABAgTKAsKkDOocAQIECBAgkAsIk9zOkgABAgQIECgLCJMyqHMECBAgQIBALiBMcjtLAgQIECBAoCwgTMqgzhEgQIAAAQK5gDDJ7SwJECBAgACBsoAwKYM6R4AAAQIECOQCwiS3syRAgAABAgTKAsKkDOocAQIECBAgkAsIk9zOkgABAgQIECgLCJMyqHMECBAgQIBALiBMcjtLAgQIECBAoCywA7qOCVn56WxgAAAAAElFTkSuQmCC")
}

.window > * {
  position: relative;
  z-index: 3;
  color: white;
  font-family: sans-serif;
}

.window::before {
  transform: translateY(-2rem);
  top: 0;
}
.window::after {
  transform: translateY(2rem) scaleY(-1);
  bottom: 0;
}

.window::before,
.window::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,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);
}

<div class="window">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>