背景大小是 div 的一半

Question

我需要一个 div 宽度为 50% 的背景（从左边缘到中心）。并且背景图像在屏幕改变时不应该改变比例。现在我有了css：

.bg {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-direction: column;
  background: url(../img.png);            
  background-position: left;
  background-size: 50vw 100%;
  -webkit-background-size: 50vw 100%; /* browser support */
  -moz-background-size: 50vw 100%; /* browser support */
  -o-background-size: 50vw 100%; /* browser support */
  background-repeat: no-repeat;
}

<div class="bg container-fluid px-0">
  <div class="container-xl">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</div>

img的尺寸：1043*735

但图像在不同屏幕上会改变比例（压缩或拉伸）。有没有办法做图像“覆盖”但仍然是 div 的一半？

Answer 1

添加一个覆盖一半宽度的左侧填充并将背景剪辑到内容框，然后您可以使用封面：

.bg {
  height:100vh;
  padding-left:50%;
  background: url(https://picsum.photos/id/237/200/300);
  background-position:center;
  background-size: cover;
  background-origin:content-box;
  background-clip:content-box;
}


body {
 margin:0;
}

<div class="bg"></div>