CSS形象定位，类似于背景位置

Question

我有，我想融入的500px的高度，也可以近水平，垂直居中真正的大图片。它们不是背景图像，所以我不能使用background-position属性。我想，我需要这样的事情，但对于的img标签：

background-position: 50% 50%; 

编辑：我需要的宽度是100%。我正在尝试使用“更好的简单幻灯片演示”进行这项工作。以下是该代码链接：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; 
}