代码之家 › 专栏 › 技术社区 › forthrin

固定滚动文本列旁边的图像

css html

forthrin · 技术社区 · 7 年前

我试图通过两个相邻的HTML框实现以下功能:

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

但是,对于当前版本,我必须手动指定图像框的高度/宽度(augh!),当我更改浏览器宽度时,文本将跳转。我只是不擅长这个。

实现预期结果的最简单、最直接的方法是什么?

<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>

1 回复 | 直到 7 年前

Tanel Eero 7 年前

.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/