Foundation 6.4のカード内で画像が伸びる理由コンポーネント

Question

私は、サイト6.4のZurb Foundationを使ってレイアウトを行っていました。私は大きなビューでは1行に3枚、小さなビューでは2枚のカードを持っていたい。大画面で見ると画像が伸びています。ここ

はCodepenです：https://codepen.io/coolsaint/pen/oGWmLq

私は画像を引き伸ばすことにしたいと、大きな視野で自分の元の寸法に残り、それらの間のいずれかの余裕があってはならないしていません。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" /> 
 

 
<div class="grid-container"> 
 
    <div class="grid-x align-center"> 
 

 

 
    <div class="cell shrink small-6 large-4"> 
 
     <div class="card"> 
 

 
     <img src="http://via.placeholder.com/320x180" /> 
 

 
     </div> 
 
    </div> 
 
    <div class="cell shrink small-6 large-4"> 
 
     <div class="card"> 
 

 
     <img src="http://via.placeholder.com/320x180" /> 
 

 
     </div> 
 
    </div> 
 
    <div class="cell shrink small-6 large-4"> 
 
     <div class="card"> 
 

 
     <img src="http://via.placeholder.com/320x180" /> 
 

 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

Answer 1

イメージがあるためフレキシボックスの延伸され、ここで同様の問題である：Why does flexbox stretch my image?

あなたはまた、代わりに<img>の背景画像との戦略を試みることができます。

320x180（56％）の縦横比を維持しますか？ コードは以下の通りです：https://codepen.io/mcordeiro/pen/YrQNNm