代码之家 › 专栏 › 技术社区 › coolsaint Christian C. Salvadó

在Foundation 6.4.3卡中,如何阻止图像在Flexbox容器内拉伸?

zurb-foundation flexbox css html

coolsaint Christian C. Salvadó · 技术社区 · 8 年前

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>

1 回复 | 直到 8 年前

kukkuz 8 年前

align-self 给你的 img 发生在 align-items stretch 默认情况下 ). 您还可以添加 align-items: center 给你的 card

如果需要的话,你可以投一个 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>