Question

编辑：我的问题是如何使用CSS设置img元素的样式而不拉伸图像（改变纵横比），使它们在网格中具有一致的高度和宽度，没有使用div 。

EDIT2： suggested duplicate question没有回答我的问题。我接受了关于CSS clip-path属性的答案，因为它最符合我的需求。

我正在尝试创建一个3x3图库。我得到了宽度正常工作，但我无法弄清楚如何在没有明确设置高度（以像素为单位）的情况下使图像达到相同的高度（这会拉伸图像，不适应用户的屏幕尺寸，并且看起来可怕）。

Here's what I have so far (only showing 2 rows to demonstrate height difference)

我在Stack Overflow上找到了几个使用div和背景图像来解决问题的答案，但我使用的图像是内容所以它们需要作为img元素包含在我的HTML中。

这是我的HTML（为简单起见，不包括src和alt img属性）：

<section>
  <img>
  <img>
  <img>
  <img>
  <img>
  <img>
  <img>
  <img>
  <img>
</section>

以下是img元素的样式：

section img {
  width: 100%;
  display: block;
  margin: 1em 0;

  @include for-tablet-up {
    display: inline-block;
    margin: .5em 2.5%;
    width: calc(85%/2);
  }

  @include for-desktop-up {
    width: calc(85%/3);
  }
}

以下是我的Sass mixins：

@mixin for-tablet-up {
    @media screen and (min-width: 768px) { @content; }
}

@mixin for-desktop-up {
    @media screen and (min-width: 1024px) { @content; }
}

Answer 1

CSS剪辑路径属性听起来像是符合您的需求。

一致的img元素高度，无需使用CSS拉伸图像

1 个答案: