イメージストレッチと塗りつぶしの列を持つ

Question

現在私は私のサイトに追加しようとしているプロモーションセクションがあります。プロモーションセクションには3つの画像があります。最初の列は左の列、次の2つの画像は垂直に2番目の列に配置されます。 2番目の列の2つのイメージは完全です。左側のイメージは正しいサイズに調整されていません。列全体を伸ばして塗りつぶす必要があります。

コード（http://codepen.io/anon/pen/eZGzOw）：私は、最大高さ/最大幅100％、幅/高さの自動を持っている画像のスタイルを設定しようとした

<div class="row"> 
    <div class="medium-8 columns"> 
    <p> 
     <img src="http://www.bandwagonbible.com/Stories/Lifestyle/AprilFoolsPrank/Main.jpg"> 
    </p> 
    </div> 
    <div class="medium-4 columns"> 
    <p> 
     <img src="http://www.bandwagonbible.com/Stories/LifeHacks/GetRich/Image4.jpg" alt="advertisement for deep fried Twinkies" class="nostyle"> 
    </p> 
    <p> 
     <img src="http://www.bandwagonbible.com/Stories/Fitness/GettingSixPackAbs/Image2.jpg" alt="article promo image" class="nostyle"> 
    </p> 
    </div> 
</div> 

。

Answer 1

アスペクト比を維持する場合は、flex-boxが解決策です。

は

.row { 
    display: flex; 
} 
.medium-8{ 
    flex: 1.50; // adjust this for better aspect ratio 
} 
.medium-4{ 
    flex: 0.55; // adjust this for better aspect ratio 
} 

より良い結果を得るために画像上pタグを削除与えます。

は、垂直このPEN