Question

在我开始问这个问题之前，我确实给了一个搜索，因为这是一个非常简单的问题。我有一个图像，我想将它作为我们网页上的唯一元素。没有其他内容，因为这张图片传达了我们想传达的内容。现在我们还要根据显示的设备调整自身大小。我希望这可以通过HTML实现，但我想知道是否还有其他选择。

谢谢，

Karsnen

Answer 1

您正在寻找的是background-size属性。通过将background-size:cover应用于<body>，无论视口尺寸如何，图像都会相应地调整自身大小。 注意：您的图片可能会使用封面进行剪辑。

background-size的替代值也可以是包含。如果您应用background-size:contain，它仍然会像前者一样相应地调整图像大小。 注意：虽然这种方法承诺永远不会剪切图像，但它也会显示负面/死区（有时不太理想）。

您的CSS应反映以下内容：

body {
 background-image: url('bg.jpg');
 background-position: center center;
 background-size: cover; /* or background-size: contain */
}

Answer 2

您可以将图像用作网络资源（“页面”）。您可以使用href="test.jpg"之类的内容链接到它，也可以直接宣告其网址。浏览器会以某种方式显示它，可能会缩放它以适应浏览器窗口宽度。

下一个更简单，更好的方法是使用仅包含img元素的页面作为其内容。通过将其宽度设置为100％（在HTML或CSS中），可以缩放到浏览器窗口宽度。这样，它将保持其宽度：缩放时的高度比例。浏览器的缩放质量各不相同，但通常都很好，除非你向上扩展很多。在这种方法中，图像的固有宽度应该足够大（比如2000像素），以避免相当大的向上缩放。

要删除图像周围的默认间距（默认页边距），最简单的方法是使用CSS。

示例（“......”将被有用信息替换）：

<!doctype html>
<meta charset=utf-8>
<title>...</title>
<style>
html, body { margin: 0; padding: 0; }
</style>
<img src="demo.jpg" alt="..." width="100%">

Answer 3

将其设为background-image并使用相应的background-size（例如contain）：

html {
    height: 100%;
}

body {
    background: url('to/your/image.png') no-repeat;
    background-size: contain;
}

Here's a demo.

Answer 4

我用这个： CSS

#body{
    background:url(../img/bg.jpg);
    margin: 0;
}

的javascript

$("#body").css('width',window.innerWidth)
$("#body").css('height',window.innerHeight)

如何将图像显示为整个网页？

4 个答案: