Question

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

background-position: 50% 50%;

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

Answer 1

在这种情况下，您可以使用的是对象适合属性。您可以在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;
}

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

1 个答案: