Image in full screen with img tag

Question

I am using the img tag for my slider images, I need the image to be full width and height and centered inside its' container.

My problem is when I resize the window width, my image becomes small and it's height doesn't follow the window height. I need the same behaviour as background-size: cover but with the image tag.

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

If I make the image as background, everything works fine, but the slider will not. I need to use the <img> tag. Here is my example.

Answer 1

There are several ways to make an image cover a div with the image tag, the simplest is to use the object-fit property like this :

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

The browser support is good for object-fit (see canIuse) but if you need to support more browsers (like IE), you can use this technique to center a image fullscreen image with the <img> tag :

• vertical and horizontal centering with absolute positioning, negative top, bottom, left and right values combined with margin:auto;
• image always covers viewport with 100% min-height and 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="">