图片全宽和全高，没有滚动条

Question

在我的HTML文件中，我只有一个图像标签。我通过代码设置了source属性，并希望将此图片设置为全宽和全高。

图片本身已附加此CSS

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

并且页面本身使用

html, body {
  height: 100%;
}

body {  
  margin: 0;
}

以某种方式出现垂直滚动条。滚动范围可能在5像素左右，因此很小。

如何删除此内容？我希望img处于全屏状态且没有滚动条。

Answer 1

将margin: 0;添加到html, body，不仅添加到body。如果还不够，请将display: block添加到img

Answer 2

添加

display:block;
overflow:hidden;

对于CSS中的img标签，将宽度和高度设置为100％ 最终会是这样

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

Answer 3

尝试一下：

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

或者，如果您无法修改display属性，则添加vertical-align:top;：

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

Answer 4

请按照以下工作片段所示将display: block设置为图像，然后将留出少量空白。

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

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

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