为什么图像在 Foundation 6.4 Cards 组件中被拉伸

Question

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

这里是 Codepen：https://codepen.io/coolsaint/pen/oGWmLq

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

<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，图像被拉伸，这里有一个类似的问题：Why does flexbox stretch my image?

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

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