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 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.

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

Comments

[G.L.P]

try to set min-height using media query for other devices

[Anju Aravind]

i need to use image tag itself.

[Tushar]

Did you want something like this codepen.io/anon/pen/ECJmH

[Anju Aravind]

is there any option to make that image center with js or css?

[wesleycoder]

Yes it is, you can use css transform and margin-left for this: jsfiddle.net/Yq5KR/32

[web-tiki]

@wesleycoder or you can use absolute positioning with negative top/bottom/left/right values combined with margin:auto; jsfiddle.net/webtiki/Yq5KR/33

[ldwg]

Works great with small images. Oddly enough large images are not being downscaled but displayed way to large.

[web-tiki]

@ldwg I added another technique that solves the issue with the large images with the object-fit property.

[pldg]

The IE compatible solution doesn't work on mobile (try it with devtools). Here is a working alternative: css-tricks.com/perfect-full-page-background-image/…