CSS - 如何将巨大的图像设置为浏览器窗口的大小？答案

【问题标题】：CSS - how to set up a huge image to the size of window of browser?CSS - 如何将巨大的图像设置为浏览器窗口的大小？
【发布时间】：2013-07-29 18:58:32
【问题描述】：

我有一个巨大的图像（2000 像素上的 3000 像素），我想将此图像设置为网站背景并调整图像与窗口的比例。到目前为止，我正在这样做：

body {
    background: url('image.jpg') !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-position: center !important;
}

图像设置在背景上，但并不完全可见 - 只是图像的“中心”，而不是整个图像。

有没有办法使用 CSS 来做到这一点？

【问题讨论】：

使用背景尺寸：100%;

标签： html css image background position

【解决方案1】：

我想你想要这个：

* {
margin: 0px;
padding: 0px;
border: 0px groove;
}
body {
width: 100%;
height: 100%;
background-image: url(picture);
background-size: 100%;
}

【讨论】：

当您的问题得到回答后，您可以点击复选框。

【解决方案2】：

使用background-size:100%;

另外，Check this link 供进一步参考。

【讨论】：

【解决方案3】：

您可以在您的 css 中执行以下操作

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

body{
margin:0px;
padding:0px;
height:100%;
width:100%;
background-image: url(picture);
}

删除所有边距或填充并将正文设置为完整

仅使用 html 页面进行操作

<html>
<body background="bgimage.jpg" style="height:100%; width:100%;">
<h1>Hello world!</h1>

</body>
</html>

请参阅下面的 W3schools 示例 http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_body_background

【讨论】：