Question

我试图创建一个简单的网页，当你打开它时，这张照片名为＆＃34; wallpaper.jpg＆＃34;将根据您的窗口大小进行调整，因此没有滚动条。如果重要，照片为1920 x 1080。

目前我有：

<html>

<body bgcolor = "#000000">

<style>

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

</style>

<img src = "wallpaper.jpg">

</body>

</html>

但它仍然留下垂直滚动条

Answer 1

首先要做的事情：

请勿使用bgcolor已弃用，
您应该在margin重置body，因为它默认为margin:8px（值可能因浏览器而异），以消除周围的空白区域。

然后使用img如果img height高于视口height（如果img没有＆＃39}，则您将始终拥有垂直滚动条。 ta父母width）

因此，解决方法是将图片用作background，使用cover使其成为完整页面响应

＆＃13;

body {
  margin: 0;
  background: url("//placehold.it/1920x1080") fixed no-repeat center center / cover
}

＆＃13;

`

Answer 2

如果您想将图片放在后台，@dippas提供的答案会有效，但如果您在html文档中使用img标记，那么就有办法了！

html {
    height:100%;
}
body {
    position: relative;
    height:100%;
    width:100%;
    padding 0;
    margin: 0;
}
img {
    position: absolute;
    height: 100%;
    width:100%;
}

这是我的JSBin实施。希望能帮助到你！

Answer 3

此方法也有效。替换＆＃34; image.png＆＃34;与您的图像的真实链接。

＆＃13;

html { height: 100%; }
body {
  height: 100%;
  margin: 0;
  overflow:hidden;
}

＆＃13;

<img src="image.png" height="100%" width="100%">

＆＃13;

自动调整图像

3 个答案: