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.

Did you want something like this http://codepen.io/anon/pen/ECJmH — Tushar, Jul 09 '14 at 10:10

web-tiki · Accepted Answer · 2021-12-16T09:07:38.510

57

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

edited Dec 16 '21 at 09:07

answered Jul 09 '14 at 10:11

web-tiki

99,765
32
217
249

is there any option to make that image center with js or css? – Anju Aravind Jul 09 '14 at 10:14
Yes it is, you can use css transform and margin-left for this: http://jsfiddle.net/Yq5KR/32/ – wesleycoder Jan 23 '15 at 11:13
@wesleycoder or you can use absolute positioning with negative top/bottom/left/right values combined with `margin:auto;` http://jsfiddle.net/webtiki/Yq5KR/33/ – web-tiki Jan 23 '15 at 11:17
Works great with small images. Oddly enough large images are not being downscaled but displayed way to large. – ldwg Apr 10 '17 at 14:20
1

@ldwg I added another technique that solves the issue with the large images with the `object-fit` property. – web-tiki Jun 16 '17 at 09:20
The IE compatible solution doesn't work on mobile (try it with devtools). Here is a working alternative: https://css-tricks.com/perfect-full-page-background-image/#article-header-id-2 – pldg Jul 25 '19 at 14:48

Image in full screen with img tag

1 Answers1