修复了滚动文本列旁边的图像

Question

我正在尝试使用两个相邻的 HTML 框来实现以下目标：

1. 右侧框中的文本应为 300 像素宽，并且始终保持在右侧。
2. 左侧框应填充浏览器宽度的其余部分（即支持调整窗口大小）。
3. 图像应在左侧框中水平居中。
4. 图像应自动缩放以填充整个浏览器高度。
5. 图像位置应该是固定的，即。向下滚动页面时不滚动。

但是，在当前版本中，我必须手动指定图像框的高度/宽度（哎呀！），当我更改浏览器宽度时，文本会跳来跳去。我只是不擅长这个。

达到预期结果的最简单、最直接的方法是什么？

<style>
  body {
    margin: 0;
  }
  .left {
    float: left;
    width: 700px; /* BAD */
    height: 700px; /* BAD */
    background-image: url("image.jpg");
    background-attachment: fixed;
    background-position: center top;
  }
  .right {
    float: right;
    width: 300px;
    padding: 0 8px 0 8px;
  }
</style>

<div class="wrapper">
<div class="left"></div>
<div class="right">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing 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 adipisicing 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 adipisicing 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 adipisicing 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>
</div>

Answer 1

要固定左侧的图像，您需要将容器固定到窗口，因此添加位置：固定；。然后只需使用所有边的坐标使其填充左侧，但在右侧留下 300 像素 - 左侧：0，顶部：0，底部：0，右侧：300 像素。对于要填充容器的图像，请添加背景大小。您可以使用任一封面来始终填充容器的高度和宽度，或者仅使用“自动 100%”来始终使其具有容器的 100% 高度。我将 box-sizing:border-box 添加到您的右侧元素中，这样它就不会乘以 300px 宽度和填充，从而使总数超过 300px 并与左侧发生碰撞。

.left {
  position: fixed;
  right: 300px;
  top: 0;
  bottom: 0;
  left: 0;
  background-image: url("//placehold.it/1000x1000");
  background-position: center;
  background-size: cover;
}
.right {
  float: right;
  width: 300px;
  padding: 0 8px 0 8px;
  box-sizing:border-box;
}

我为示例创建了一个小提琴：https://jsfiddle.net/7v18eyL2/8/