Pourquoi les images sont-elles étirées à l'intérieur de la carte Foundation 6.4 Composant

Question

Je travaillais sur une mise en page en utilisant Zurb Foundation for Sites 6.4. Je veux avoir 3 cartes par rangée en grande vue et 2 colonnes en petite vue. Les images sont étirées quand je regarde en grand écran.

ici est le Codepen: https://codepen.io/coolsaint/pen/oGWmLq

Je ne veux pas que les images soient étirés et restent à leur dimension d'origine en grande vue et il ne devrait pas y avoir de marge entre eux.

<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

les images étirez à cause de FlexBox, voici une question similaire: Why does flexbox stretch my image?

Vous pouvez également essayer une stratégie avec un background-image au lieu d'un <img>.

Voulez-vous conserver les proportions de 320x180 (56%)? Voici un codepen: https://codepen.io/mcordeiro/pen/YrQNNm