html - 为什么图像在 Foundation 6.4 Cards Component 中被拉伸(stretch)

Question

我正在使用 Zurb Foundation for Sites 6.4 进行布局。我想在大 View 中每行有 3 张卡片，在小 View 中有 2 列。当我在大屏幕上查看时，图像会被拉伸(stretch)。

这是代码笔:https://codepen.io/coolsaint/pen/oGWmLq

我不希望图像被拉伸(stretch)并在大 View 中保持其原始尺寸，并且它们之间不应有任何边距。

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

Answer 1

由于 flexbox，图像被拉伸(stretch)，这里有一个类似的问题:Why does flexbox stretch my image?

您也可以尝试使用背景图像而不是 <img> 的策略.

是否要保留 320x180 (56%) 的纵横比？ 这是一个代码笔:https://codepen.io/mcordeiro/pen/YrQNNm