html - CSS 图像定位，类似于背景位置

Question

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

background-position: 50% 50%;

编辑:我需要宽度为 100%。我正在尝试使用“更简单的幻灯片放映”来完成这项工作。这是指向该内容的代码笔链接: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;
}