Html 网站宽度始终适合浏览器页面宽度的100%_Html_Browser_Width_Scale

Html 网站宽度始终适合浏览器页面宽度的100%

html browser

Html 网站宽度始终适合浏览器页面宽度的100%,html,browser,width,scale,Html,Browser,Width,Scale,我的职业是3D艺术家，但最近我一直在尝试从头开始为自己创建一个网站。我的需求非常简单——一个宽屏网站，由背景图像和缩略图组成，点击后加载一个覆盖弹出窗口，显示关于特定内容的更多信息。弹出式覆盖不是这里的问题我目前的问题是，我需要我的页面始终为浏览器宽度的100%，这意味着它必须与其中的所有内容（缩略图）一起缩放。我在1920x1080屏幕上进行了第一次尝试，结果非常完美——当我将其加载到1366屏幕的笔记本电脑上时，结果只显示了整页的一部分，并给了我滚动条来查看其余部分我通过px放置缩略图，

我的职业是3D艺术家，但最近我一直在尝试从头开始为自己创建一个网站。我的需求非常简单——一个宽屏网站，由背景图像和缩略图组成，点击后加载一个覆盖弹出窗口，显示关于特定内容的更多信息。弹出式覆盖不是这里的问题

我目前的问题是，我需要我的页面始终为浏览器宽度的100%，这意味着它必须与其中的所有内容（缩略图）一起缩放。我在1920x1080屏幕上进行了第一次尝试，结果非常完美——当我将其加载到1366屏幕的笔记本电脑上时，结果只显示了整页的一部分，并给了我滚动条来查看其余部分

我通过px放置缩略图，因为我已经从Photoshop获得了值，但我知道我的需求只能通过px来实现，我如何克服这一点

这是我的设置的视觉效果

灰色是浏览器窗口红色是背景绿色就是满足

一切都应该以同样的速度扩展

这是我的HTML

<body>

<div id="background">
<img src="images/background.png">
<div id="box3thumb">
img src="images/box3thumb.png">
</div>
</div>

</body>

我真的很感激在这方面能得到的任何帮助

谢谢

Elliott

好的，对于您的

#背景

，您可以使用此css缩放浏览器：

#background{
    width: 100%;
    background: red;
}

对于您的缩略图，我不太清楚您希望如何放置它们，但根据您的图像，您需要将它们内联放置：

#thumbnails{
    display: inline-block;
    margin-left: 15%;
}

页边距的百分比可能会根据需要而变化。

如果将页面的正文和html元素设置为

CSS:

这将防止出现滚动条，同时保持屏幕的全宽和全高，无论分辨率如何。至于你的缩略图，如果你有一定数量的缩略图，那么你可以将缩略图的宽度设置为10%宽度和高度，边距为1%；，这将允许您适应大约64个缩略图，但如果用户的分辨率很差，它们会变小

.thumbnail
{
    position: relative;
    display: inline-block;
    width: 10%;
    height: 10%;
    margin: 1%;
}

编辑------------------

使用这样的大缩略图，您可以使其更像这样：

.thumbnail
{
    position: relative;
    display: inline-block;
    width: 20%;
    height: 20%;
    margin: 5%%;
}

在style.css中使用

#background{
    width: 90%;
    background: red;
}

/*thumbnails*/

#thumbnails{
    display: inline-block;
    margin-left: 10%;
    vertical-align:text-bottom;
}

如果你想在背景和浏览器窗口之间有一个小的缓冲区，这将需要更多的缓冲，包括一个包装类，它被设置为100%的宽度和高度，使用一个小的填充来抵消你的内容，那么如果你能把它放到一个文件夹中，调试它就会容易得多。

.thumbnail
{
    position: relative;
    display: inline-block;
    width: 20%;
    height: 20%;
    margin: 5%%;
}

#background{
    width: 90%;
    background: red;
}

/*thumbnails*/

#thumbnails{
    display: inline-block;
    margin-left: 10%;
    vertical-align:text-bottom;
}