Image full width and height with no scrollbar

Question

In my HTML file I only have an image tag. I set the source attribute by code and want to set this image on full width and full height.

The image itself has this CSS attached

img {
    width: 100%;
    height: 100%;
}

and the page itself uses

html, body {
  height: 100%;
}

body {  
  margin: 0;
}

Somehow a vertical scrollbar appears. The scrolling range might be around 5px so it's really small.

How can I remove this? I want the img being fullscreen with no scrollbar.

Answer 1

Please set display: block to image as shown in below working snippet then that small margin will be gone.

html, body {
  margin: 0;
  height: 100%;
}

img {
  width: 100%;
  height: 100%;
  display: block;
}

<img src="http://placekitten.com/1200/1200">

Answer 2

Add margin: 0; to html, body, not only to body. And if that's not enough, add display: block to the img

Answer 3

Try it:

img {
 width: 100%;
 height: 100%;
 display: block;
}

Or if you not able to modify display properties then add vertical-align:top;:

img {
    width: 100%;
    height: 100%;
    vertical-align:top;
}

Answer 4

add

display:block;
overflow:hidden;

for an img tag in css than set width and height to 100% in the end it will be like that

img{
   display:block;
   overflow:hidden;
   width:100%;
   height:100%;
 }