html - 带有 img 标签的全屏图像

Question

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

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

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

如果我将图像作为背景，一切正常，但 slider 不会。我需要使用 <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% 覆盖视口(viewport) 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="">