CSS 图像定位，类似于 background-position

Question

我有非常大的图像，我想将其放入 500px 的高度，并且几乎水平和垂直居中。它们不是背景图像，所以我不能使用 background-position 属性。我想我需要这样的东西，但是对于 img 标签：

background-position: 50% 50%;

编辑：我需要宽度为100%。我正在尝试使用“更好的简单幻灯片”来完成这项工作。这是指向该链接的 codepen 链接：http://tinyurl.com/k38oapk。

Answer 1

在这种情况下，您可以使用 object-fit 属性。你可以在 Mozilla MDN here 上阅读它。

这是来自 MDN 的示例。 HTML 标记：

<div>
  <h2>object-fit: contain</h2>
  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/>
</div>

CSS：

img {
  width: 150px;
  height: 100px;
  border: 1px solid #000;
}

.contain {
  object-fit: contain;
}