Menu icon Foundation
How to stop images getting stretched inside a Flexbox Container in Foundation 6.4.3 Card?

I was making a layout to create an image grid using Zurb Foundation 6.4.3 XY Grid's Card Component. All my images are actually 320x180 px in dimension. But when I am running the following Code images are getting stretched.

I am new in CSS3 Flexbox and Foundation XY Grid and not being able to find out what is happening here. I will be grateful if someone help me to find out a solution.

<div class="grid-container">
  <div class="grid-x medium-up-3">

    <div class="cell">
      <div class="card">
        <img src="https://i.stack.imgur.com/XE9GX.png`enter code here`" />


      </div>
    </div>
    <div class="cell">
      <div class="card">

        <img src="https://i.stack.imgur.com/XE9GX.png" />


      </div>
    </div>
    <div class="cell">
      <div class="card">

        <img src="https://i.stack.imgur.com/XE9GX.png" />


      </div>
    </div>
    <div class="cell">
      <div class="card">

        <img src="https://i.stack.imgur.com/XE9GX.png" />


      </div>
    </div>
    <div class="cell">
      <div class="card">

        <img src="https://i.stack.imgur.com/XE9GX.png" />


      </div>
    </div>
    <div class="cell">
      <div class="card">
        <img src="https://i.stack.imgur.com/XE9GX.png" />


      </div>
    </div>
  </div>
</div>

flexbox

I was making a layout to create an image grid using Zurb Foundation 6.4.3 XY Grid's Card Component. All my images are actually 320x180 px in dimension. But when I am running the following Code images are getting stretched.

I am new in CSS3 Flexbox and Foundation XY Grid and not being able to find out what is happening here. I will be grateful if someone help me to find out a solution.

<div class="grid-container">
  <div class="grid-x medium-up-3">

    <div class="cell">
      <div class="card">
        <img src="https://i.stack.imgur.com/XE9GX.png`enter code here`" />


      </div>
    </div>
    <div class="cell">
      <div class="card">

        <img src="https://i.stack.imgur.com/XE9GX.png" />


      </div>
    </div>
    <div class="cell">
      <div class="card">

        <img src="https://i.stack.imgur.com/XE9GX.png" />


      </div>
    </div>
    <div class="cell">
      <div class="card">

        <img src="https://i.stack.imgur.com/XE9GX.png" />


      </div>
    </div>
    <div class="cell">
      <div class="card">

        <img src="https://i.stack.imgur.com/XE9GX.png" />


      </div>
    </div>
    <div class="cell">
      <div class="card">
        <img src="https://i.stack.imgur.com/XE9GX.png" />


      </div>
    </div>
  </div>
</div>
Rafi Benkual 3 months ago

If you use any vertical alignment class or flexbox property, it will change from stretch to auto.

Use these for top alignment
.align-top
or in CSS 

align-items: flex-start

Suman Haldar 3 months ago

Thanks @Rafi Benkul for your answer.

Looks like only giving a vertical alignment class was not solving the problem. It needed a shrink class with cell too.

Here is the solution provided by kukkuz in a my similar post in stackoverflow

https://codepen.io/anon/pen/KXVgPQ?editors=1000