セクショングラウンドの背景尺度でのCSS勾配

Question

2つに分割されたページセクションがあります。左側は行コンテナにコンテンツが表示され、残りの半分はコンテナの外に出る画像になります。このセクションには、ラップトップが棚に座っているような効果を与えるグラデーションBGがあります。

（https://monosnap.com/file/fX2jGJ9HcEuw6xsSFK8TzbdO023RMd）

目標：

1. 画像は、ビューポートの50％を取ると右の手を触れあり、ここで私が達成しようとしているかのスクリーンショットです の画面が表示されます。コンテンツはコンテンツコンテナ（行）に残る必要があります
2. グラジエントはスクリーンショットに表示されている位置にとどまります。
3. セクションは、それに応じて縮尺が変更されたときに高さに応じて応答します。

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> 

コンテンツがそれに応じて所定の位置にとどまるので、私はコンテンツと財団のグリッドを作成しました。 次に、画像divを作成し、画像をグリッドの他の半分に重ねて配置しました。

CSS：

* { 
    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グラデーションを適用します。イメージは絶対的にポジティブですので、そのコンテナの一部ではなく、ビューポートの右側に拡張できます。

私はいくつかの問題を抱えています。

1. セクションにパディングを追加しない限り、イメージはカットオフになります。
2. ビューポートのサイズを変更すると、グラデーションを同じ場所に置く（画像に比例してサイズ変更する）方法を知りません。

私は本当にスクリーンショットで機能とデザインを取得する方法を失っています。

Answer 1

二年後...

は、あなたが探しているものをthisですか？

コード私が持っているcuzの：

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> 

CSS（マイナス美学）

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%; 
} 

私はそれをどのように行うのですか？（他に類を見ない芸術的な才能を有する以外に）

1. フレックス。私は、のsectionとdisplay:inline-blockの2人の子供divを使用しました。 sectionの背景にグラデーションを追加しました。
2. flex-basis:50%を両方ともdivsに追加して、2つの等しく幅の広い列を作成しました。
3. 私は画像max-width:100%を与えたので、その列の外には伸びないでしょう。必要ならば、max-width:120%またはそれに類するものを試し、margin-leftを画像に追加してください。
4. テキストdivにalign-self:centerを使用しましたので、sectionの内側に垂直に配置されています。

これで問題が完全に解決しない場合は、私のソリューションを編集して嬉しいです。