爲什麼圖像在基礎內部拉伸6.4卡組件

Question

我正在使用Zurb Foundation for Sites 6.4進行佈局。我希望在大視圖中每行有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

的圖像，因爲Flexbox的伸展，這裏是一個類似的問題：Why does flexbox stretch my image?

您也可以嘗試與背景圖像，而不是<img>的戰略。

是否要保留320x180（56％）的寬高比？ 這裏是一個codepen：https://codepen.io/mcordeiro/pen/YrQNNm