右から切り抜くイメージを持つ等しい2つの列 - CSS

Question

私は、画面のサイズ変更時に右から切り抜く左の列/セクションにイメージを持つ2列幅の等幅セクションを作成しています。

右の列のテキストのテキストがイメージのサイズよりも高くなった場合、イメージの高さを固定して（左に）、要素を引き伸ばして（背景色を維持する）

私は「普通の」CSSとフレックスボックスをストレッチとフレックス成長させましたが、動作させることはできません。これは動作しません

私はサイズが正しく動作する）を取得する方法がわからないまたはb）は側面

<div class="section"> 
<div class="image"> 
    <img src="http://xxx.jpg"> 
    </div> 
    <div class="text"> 
    text_abc 
    </div> 
</div> 

から切り取ることを得る：

.section { 
    display: flex; 
    flex-wrap: nowrap; 
    align-items: stretch; 
    justify-content: centre; 
} 

.image { 
    background-color: #f9f6ec; 
    width: 428px; 
    flex-grow: 1; 
} 

.text { 
    font-size: 1.25em; 
    padding: 31px; 
    background-color: #f9f6ec; 
    flex-grow: 1; 
} 

どちらもありません

.section { 
    height: 100%; 
} 

.image { 
    background-color: #f9f6ec; 
    width: 50%; 
    float: left; 
} 

.text { 
    font-size: 1.25em; 
    padding: 31px; 
    background-color: #f9f6ec; 
    width: 50%; 
    float: right; 
} 

Answer 1

は、私の知る限りは、あなたの質問から理解として、あなたはこのような何かをしたい：：ん

.section 
 
{ 
 
    display: flex; 
 
    width: 500px; 
 
    height: 500px; 
 
    border: 1px dotted black; 
 
} 
 

 
.image 
 
{ 
 
    flex: 1; 
 
    background-color: #f9f6ec; 
 
    background-image: url('http://lorempixel.com/image_output/nightlife-q-c-640-480-5.jpg'); 
 
    background-position: center center; 
 
} 
 

 
.text 
 
{ 
 
    flex: 1; 
 
    font-size: 1.25em; 
 
    background-color: #f9f6ec; 
 
}

<div class="section"> 
 
<div class="image"></div> 
 
    <div class="text"> 
 
    text_abc 
 
    </div> 
 
</div>

あなたがbackground-sizeとbackground-position