HTML 和 CSS 的整页响应图像

Question

我正在尝试将图片覆盖整页。

垂直滚动：允许

水平滚动：不允许

图片：图片必须显示整页且不留边框，并根据设备大小进行响应。

html, body, img {
  max-width: 100%;
  min-height: 100%;
  height: auto;
  width: auto;
  overflow-x: hidden;
}

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<img src="example.png" />
</body>
</html>

问题是，它在屏幕的所有 4 边都留下空白 space。如何解决这个问题？

Answer 1

您可以使用背景图片属性在这里查看 - W3schools

Answer 2

您必须通过删除填充和边距来重置浏览器添加到 body 标签的样式，随时将其添加到您的样式顶部：

body {
  padding: 0;
  margin: 0;
}
html, body, img {
  max-width: 100%;
  min-height: 100%;
  height: auto;
  width: auto;
  overflow-x: hidden;
}

Answer 3

如果你想让图片覆盖整页，最好使用background-image和background-size覆盖，这样你的宽高比也能保持

html, body {
  height: 100%;
}
body {
 background-image: url('https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg');
 background-size: cover;
}

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
</body>
</html>

Answer 4

可能对您有帮助：

 *{
    padding:0px;
    margin:0px;
    }

    img{
    width:100%;
    object-fit:cover;
    max-width: 100%;
    }

Answer 5

试试这个

body {
  padding: 0;
  margin: 0;
}
img {
  max-width: 100%; 
  height: auto;
  width: 100%;
}

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg" />
</body>
</html>

HTML 和 CSS 的整页响应图像

Full page responsive image with HTML and CSS

html

javascript

css

sass

html5-canvas