0

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

谢谢，

卡尔斯嫩

4

4 回答 4

2

你要找的是background-size房产。通过应用background-size:cover 到您<body>的 ，无论视口尺寸如何，图像都会相应地调整自身大小。 注意：您的图像可能会使用封面进行剪辑。

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

您的 CSS 应反映以下内容：

body {
 background-image: url('bg.jpg');
 background-position: center center;
 background-size: cover; /* or background-size: contain */
}
于 2012-08-27T20:24:41.163 回答
1

您可以将图像用作网络资源（“页面”）。你可以简单地使用类似的链接到它href="test.jpg"，或者你可以直接公布它的 URL。浏览器会以某种方式显示它，可能会缩放它以适应浏览器窗口的宽度。

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

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

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

<!doctype html>
<meta charset=utf-8>
<title>...</title>
<style>
html, body { margin: 0; padding: 0; }
</style>
<img src="demo.jpg" alt="..." width="100%">
于 2012-08-27T21:23:28.473 回答
0

将其设置为 abackground-image并使用适当的background-size（例如contain）：

html {
    height: 100%;
}

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

这是一个演示。

于 2012-08-27T20:25:59.850 回答
-1

我用这个：css

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

javascript

$("#body").css('width',window.innerWidth)
$("#body").css('height',window.innerHeight)
于 2012-08-27T20:29:49.240 回答