为什么图像在基础内部拉伸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