带有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），则可以使用此技术使用{强调图像全屏图像{1}}代码：

• 垂直和水平居中，绝对定位，负顶部，底部，左侧和右侧值与<img>
相结合
• 图片始终覆盖视口，100％margin:auto;和min-height

<强> DEMO :

min-width

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;
}