背景中的CSS渐变与截面大小成比例

我有一个页面部分被一分为二。左侧是行容器中的内容，而另一半是容器外部的图像。这部分有一个梯度背景，有助于使笔记本电脑坐在窗台上的效果。以下是我试图实现的目标的屏幕截图：

（）

目标：

让图像占据视口的50%，并触摸屏幕的右侧 屏幕。内容必须保留在内容容器（行）中

渐变保持在屏幕截图中显示的位置

缩放时，截面在高度上相应响应

HTML：

<section class="full-width snocruapp-offtheslopes tgs-section-titles half-and-half-section hide-for-small-only">
    <div class="row">
        <div class="large-6 medium-6 columns">
          <div class="copy--with-image copy--align-left">
            <div class="tgs-section-titles"><h3>Off the Slopes Counterpart</h3>
<hr>
<p>One important piece of the user experience was that the website functioned more than just a marketing tool. We developed the dashboard area so when users logged in, they were provided with personalized data, leaderboard stats and track heat mapping.</p>
</div>
          </div>
        </div><!--end large 6 right -->
        <div class="large-6 medium-6 columns"></div>
    <div class="image--align-to-window image--align-right">
         <picture>
            <source srcset="http://sandbox.techgrayscale.com/wp-content/uploads/2016/03/slopes-image2.png" media="(min-width: 1024px)">
            <img srcset="http://sandbox.techgrayscale.com/wp-content/uploads/2016/03/sno_mbl_counterpart_nograd.png" alt="Half Image">
        </picture>
    </div>
    </div><!--end row -->
</section>

* {
  margin: 0;
  padding:0;
}

section {
    display: block;
    overflow: hidden;
}

.full-width {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: initial;
}

.half-and-half-section {
    position: relative;
    margin: 50px 0;
}

.half-and-half-section .image--align-to-window {
    position: absolute;
    top: 0;
}

.half-and-half-section .image--align-right {
    right: 0;
    width: 50%;
}

.snocruapp-offtheslopes {
    background: #ffffff;
    background: linear-gradient(to bottom, #ffffff 0%, #e2e2e2 75%, #ffffff 75%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 );
}

我将CSS渐变应用于该部分。图像是绝对定位的，因此它不会是该容器的一部分，并且可以延伸到视口的右侧

我遇到了一些问题

除非我在分区中添加填充，否则图像将被截断

我不知道如何使渐变保持在视口重新调整大小时的相同位置（与图像成比例调整大小） 我真的不知道如何在屏幕截图中获得功能和设计。

两年后

你在找什么

代码，因为我必须：

HTML

<section>
  <div id="text">
    <h1>
     Off the Slopes Counterpart
    </h1>
    <hr>
    <p>
      Test test test test
    </p>
  </div>
  <div id="image">
    <img src="http://i.imgur.com/Q04uiB1.png">
  </div>
</section>

我是怎么做到的？（除了拥有无与伦比的艺术天赋）

Flexbox。我将

部分

与

显示：flex一起使用，将两个子
div
与
显示：内联块
一起使用。我在
部分的背景中添加了渐变

我在两个

div

s中都添加了

flex-basis:50%

，以形成两个同样宽的列

我给了这个图像

最大宽度：100%

，这样它就不会超出它的列。如果需要，可以尝试使用

max width:120%

或类似的方法，并在图像中添加一个负的

左边距

我在文本div上使用了

align self:center

，这样它就可以在

部分内垂直对齐了

---

如果这不能完全回答您的问题，我很乐意编辑我的解决方案。

您能更新代码笔链接吗？404

section {
  display: flex;
  background: #ffffff;
  background: linear-gradient(to bottom, #ffffff 0%, #e2e2e2 75%, #ffffff 75%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
  overflow:hidden;
}

section div {
  display: inline-block;
  flex-basis: 50%;
}

#text {
  align-self: center;
}

#image img {
  max-width: 100%;
}