画像は、私が2列のセクションを作成しようとしている親

を拡大せずに利用高さに縮小してください：画像は、私が2列のセクションを作成しようとしている親

列が同じ幅（応答）
ブロックの高さがで定義されていがそれが親の100％に伸びた後の左の列に含まれる画像の高さ。
右の列には、イメージを含むリンクがいくつかあります。

画像が縦向きの場合、元の画像のアスペクト比を含む高さを縮小するために、画像の最後の段落の画像をリンクにします。

平易なCSSで可能かどうかはわかりません。フレックスボックスとグリッドレイアウトで試しましたが、何かが欠けているはずです。あなたはwidth: 100%, height: auto;は、右コンテナの背景画像を使用するように設定左の画像を持っているだろう、これを達成できhttps://jsfiddle.net/Kuznets/8u6c70ku/3/

* { box-sizing: border-box } 
 
.wrap { max-width: 80%; margin: 0 auto; } 
 
.container { display: flex; } 
 
.left, .right { 
 
    flex: 0 0 50%; 
 
    border: 1px solid black; 
 
} 
 
.left { 
 
    position: relative; 
 
    display: flex; 
 
    align-items: flex-end; 
 
} 
 
.left div.left-text { 
 
    position: absolute; 
 
    color: white; 
 
    padding: 1em; 
 
    font-size: 200%; 
 
} 
 
.should-set-height { 
 
    width: 100%; 
 
} 
 

 
.right { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    justify-content:space-between; 
 
}

<div class="wrap"> 
 
    <div class="container"> 
 
    <div class="left"> 
 
     <img class="should-set-height" src="https://dummyimage.com/200x240/aaaaaa/ffffff" alt=""> 
 
     <div class="left-text"> 
 
     This is a beautiful slogan 
 
     </div> 
 
    </div><!--/.left--> 
 
    <div class="right"> 
 
     <header>Product title</header> 
 
     <a class="fit-height" href="javascript:void(0)"> 
 
     <img class="should-shrink" src="https://dummyimage.com/200x400/aaaaaa/ffffff"> 
 
     </a> 
 
     <div class="price">$ 19.99</div> 
 
     <button class="button-black">Add to basket</button>  
 
    </div><!--/.right--> 
 
    </div><!--/.containter--> 
 
</div><!--/.wrap-->

出典

2017-10-12 Dmitry Kuznetsov