带有img标签的全屏图像

Question

我使用img标签作为我的滑块图像,我需要图像为全宽和高度,并在其容器内居中.

我的问题是当我调整窗口宽度时,我的图像会变小,而且它的高度不会跟随窗口高度.我需要与图像标记相同的行为background-size: cover.

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

如果我将图像作为背景,一切正常,但滑块不会.我需要使用<img>标签.这是我的例子.

Answer 1

有几种方法可以使图像覆盖带有图像标记的div,最简单的方法是使用对象适合属性,如下所示:

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

演示:

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="">