如何阻止图像在 Foundation 6.4.3 Card 的 Flexbox 容器内拉伸?

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

我正在使用 Zurb Foundation 6.4.3 XY 网格的卡片组件创建图像网格。我所有的图片实际上都是 320x180 像素的尺寸。但是当我 运行 时,以下代码图像会被拉伸。

我是 CSS3 Flexbox 和 Foundation XY Grid 的新手,无法了解这里发生了什么。如果有人帮助我找到解决方案,我将不胜感激。

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css" rel="stylesheet"/>

<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>

align-self 添加到您的 img 拉伸 发生在 align-items 属性 是 stretch默认情况下 flex 方向 )。您还可以将 align-items: center 添加到您的 card

如果需要,您也可以为 img 添加 width: 100%(以便图像均匀缩放)- 请参见下面的演示:

.card img {
  align-self: center;
}
<link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css' />

<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>

基于基础的解决方案是使用:

  1. 对网格包装器使用 grid-xalign-center

  2. 单元格使用以下标记:

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

参见下面的演示:

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css">

  <div class="grid-container">
    <div class="grid-x align-center">

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