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

Question

我正在使用 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>

Answer 1

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

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

对网格包装器使用 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>

参见下面的演示：

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

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

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

html

css

flexbox

zurb-foundation