Image in full screen with img tag

background-image, css, html, image, responsive-design

Solution

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

Problem

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 its 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 a background, everything works fine, but the slider will not. I need to use the `<img>` tag. Here is my example.

Original source