带有 img 标签的全屏图像

Question

我正在为我的滑块图像使用img 标签。我需要 图像在其容器内是全宽和全高并居中。

我的问题是，当我调整窗口宽度时，我的图像变小并且它的高度不跟随窗口高度。我需要 与background-size: cover 相同的行为，但带有图像标签。

background: url(../images/slider/002.jpg) center center;
background-size: cover;

如果我将图像设为背景，一切正常，但滑块不会。我需要使用<img> 标签。 这是我的example。

Answer 1

有几种方法可以使 图像覆盖一个带有图像标签的 div，最简单的方法是像这样使用object-fit property：

html,body{
    margin:0;
    height:100%;
}
img{
  display:block;
  width:100%; 
  height:100%;
  object-fit: cover;
}

<img src="http://i.imgur.com/5NK0H1e.jpg" alt="">

浏览器支持非常适合对象匹配（请参阅canIuse），但如果您需要支持更多浏览器（如 IE），您可以使用此技术使用<img> 将图像全屏图像居中标签：

• 垂直和水平居中与绝对定位，负上、下、左、右值结合margin:auto;
• 图像始终以 100% 覆盖视口 min-height 和 min-width

DEMO :

html,body{
    margin:0;
    height:100%;
    overflow:hidden;
}
img{
    min-height:100%;
    min-width:100%;
    height:auto;
    width:auto;
    position:absolute;
    top:-100%; bottom:-100%;
    left:-100%; right:-100%;
    margin:auto;
}

<img src="http://i.imgur.com/5NK0H1e.jpg" alt="">