Question

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

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

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

＆＃13;

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

＆＃13;

Answer 1

由于flexbox，图片正在拉伸，这是一个类似的问题：Why does flexbox stretch my image?

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

您想保留320x180（56％）的宽高比吗？这是一个codepen：https://codepen.io/mcordeiro/pen/YrQNNm

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

1 个答案: