我有非常大的图像,我想要将其放入 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/