Full screen image with img tag

Question

I use the img tag for my slider images, I need the image to be full and vertical, and centered inside its container.

My problem is that when I resize the window, my image becomes small and the height does not depend on the height of the window. I need the same behavior as background-size: cover , but with an image tag .

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

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

Answer 1

There are several ways to make the artwork of a div image an image tag, the easiest is to use the object-fit property as follows:

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

Browser support is good for object snap (see canIuse ), but if you need to support more browsers (e.g. IE), you can use this method to center a full-screen image with an <img> :

• vertical and horizontal centering with absolute positioning, negative upper, lower, left and right values ​​in combination 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="">