Question

我是专业的3D艺术家，但我最近一直试图从头开始为自己创建一个网站。我的需求非常简单 - 一个宽屏网站，其中包含背景图片和缩略图，一旦点击，就会加载一个重叠弹出窗口，显示有关该特定内容的更多信息。弹出式叠加层不是问题所在。

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

我通过px放置缩略图，因为我从Photoshop获得了值，但我知道我的需求只能通过％来完成 - 我怎么能克服这个？

以下是我的设置http://i.imgur.com/ZdgTRYk.jpg

的视觉效果

格雷是浏览器窗口红色是背景绿色是内容

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

这是我的HTML

<body>

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

</body>

和我的CSS

#background {
position:relative;
left:0px;
}
#box3thumb {
position:absolute;
left:514px;
top:117px;
width:92px;
height:200px;
}

我真的很感激我可以接受的任何帮助。

Thanksm

埃利奥特

Answer 1

好的，对于#background，您可以使用此css来缩放浏览器：

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

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

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

保证金的百分比可能会根据您的需要而有所不同。

Answer 2

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

CSS：

html, body 
{
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

这将阻止滚动条出现，同时保持屏幕的整个宽度和高度，无论分辨率如何。至于你的缩略图，如果你有一定数量的缩略图，那么你可以设置缩略图的宽度，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%%;
}

Answer 3

在style.css中使用

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

/*thumbnails*/

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

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

3 个答案: