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

【问题标题】：Consistent img element heights without stretching image using CSS一致的 img 元素高度，无需使用 CSS 拉伸图像
【发布时间】：2018-05-29 07:12:06
【问题描述】：

编辑：我的问题是关于如何在不拉伸图像（改变纵横比）的情况下使用 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)

This is the goal

我在 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 混合：

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

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

【问题讨论】：

快速的互联网搜索将我带到了this article，它使用object-fit: cover（我什至不知道这个规则，但也可以在this possible duplicate question 的一个答案中找到）。这会是一个解决方案吗？
绝对最好的方法是确保图像的大小相同。
@NathanielFlick 我正在从 Unsplash API 中提取照片，因此我无法控制它们的尺寸。
@domsson 据我所知，object-fit 属性要求 img 具有设定的高度。如果您可以使用 div，则您链接的问题的答案有效，但如果您只是尝试设置 img 元素的样式，则无效。
哦，我明白了。太糟糕了，但感谢您分享您的见解！

标签： css image

【解决方案1】：

CSS clip-path 属性听起来很适合您的需要。

【讨论】：

在不使用 div 的情况下，这最符合我的需要。接受。