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

我有非常大的图像，希望适合500px的高度，并且还希望在水平和垂直方向上居中。它们不是背景图像，所以我不能使用background-position属性。我想我需要这样的东西，但是对于img标签：

background-position: 50% 50%;

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

最佳答案

在这种情况下，您可以使用的是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;
}

关于html - CSS图像定位，类似于背景位置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30422122/