0

I was working on a layout using Zurb Foundation for Sites 6.4. I want to have 3 cards per row in large view and 2 columns in small view. Images are getting stretched when I am viewing in large screen.

here is the Codepen : https://codepen.io/coolsaint/pen/oGWmLq

I don't want the images to be stretched and remain to their original dimension in large view and there should not be any margin in between them. 

<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>
coolsaint
  • 1,291
  • 2
  • 16
  • 27

1 Answers1

0

the images are stretching because of flexbox, here is a similar issue: Why does flexbox stretch my image?

You could also try a strategy with a background-image instead of an <img>.

Do you want to preserve the aspect ratio of 320x180 (56%)? Here is a codepen: https://codepen.io/mcordeiro/pen/YrQNNm

Marcelo Cordeiro
  • 320
  • 2
  • 12