섹션 크기가있는 배경 배율의 CSS 그라디언트

Question

두 페이지로 나누어 져 있습니다. 왼쪽은 행 컨테이너에 내용이 있고 나머지 절반은 컨테이너 외부로 나가는 이미지입니다. 이 섹션에는 그라디언트 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 구배를 적용했다. 이미지는 절대적으로 positined하므로 컨테이너의 일부가 아니며 뷰포트의 오른쪽으로 확장 될 수 있습니다.

몇 가지 문제가 있습니다.

1. 섹션에 패딩을 추가하지 않으면 이미지가 잘립니다.
2. 뷰포트의 크기를 조정할 때 그래디언트를 동일한 위치에 유지하는 방법 (이미지 크기에 비례하여 크기 조정)을 얻는 방법을 모르겠습니다.

저는 스크린 샷에서 기능과 디자인을 얻는 방법을 실제로 잃어 버렸습니다.

Answer 1

2 년 후 ...

는 this 당신이 찾고있는 무엇인가?

코드 I가 가지고 사촌 :

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. 플렉스 박스. 나는 을 display:flex으로, 두 명의 자식 div을 display:inline-block으로 사용했습니다. section의 배경에 그라디언트를 추가했습니다.
2. 두 개의 똑같이 넓은 열을 만들기 위해 flex-basis:50%을 두 divs에 모두 추가했습니다.
3. max-width:100% 이미지를 주었으므로 해당 열 외부로 확장되지 않습니다. 원하는 경우 max-width:120% 또는 이와 유사한 것으로 실험하고 이미지에 margin-left (부정)을 추가합니다.
4. 텍스트 div에 align-self:center을 사용 했으므로 section 안에 세로로 정렬됩니다.

이 질문에 완전히 답변하지 못하면 솔루션을 편집하게되어 기쁩니다.