0

我正在处理一个图像重的单页网站，我正在尝试找出一个安全的高度/宽度比，这样我就可以大致了解如果在容纳时宽度设置为 100% 幻灯片图像可以达到多高所有页面元素，无需按下折叠下方的“下一步”按钮。这考虑了浏览器界面、任务栏等。

这就是我的意思：图片链接

我想知道是否有任何提议/研究/应用的半标准，例如 960 网格来处理这些布局？

澄清：示例单页网站

对于我的浏览器/屏幕（在 1920x1080 分辨率屏幕上带有菜单和地址栏的 FF19），“更多”按钮将被推到折叠下方，所以我必须向下滚动才能看到它。这是我试图避免的。显然，我可以使幻灯片图像非常薄，但在大多数情况下会在下面留下很多空白空间，所以我试图找到一个有用的平衡点，如果存在的话。

干杯!

4

1 回答 1

0

您的页面宽度不应大于 1024 像素。看看任何网站，您都会发现它们不会使任何页面大于 1024* 高度。如果您不希望您的网站可以向下滚动，请坚持小于 1024*768 的内容。您将不得不自己尝试一下。事实上，我更喜欢使用 900 到 1000 像素之间的东西作为宽度。

示例 CSS 代码：

*{
    margin:0;
    padding:0;
    backgroound:#fff;

}
body { 

    font: .8em Arial, Tahoma, Verdana; 
    background: #fff url(../images/img.gif) repeat-x; color: #777; 
    width: 970px;
    margin: 0 auto;

}

编辑：至于回答您的问题，如果您将宽度设置为 100%，图像宽度将从容器 div 继承，高度将取决于图像的实际高度。对于高度小于容器 div 宽度的图像，高度将小于图像宽度，而对于高度大于容器 div 宽度的图像，图像高度将大于图像宽度。纵横比将不过要保存。我想您希望在重新调整图像大小后保留所有图像的纵横比。您应该为图像提供 max-width 和 max-height css 属性，以确保它们不会超出其容器 div 并按下更多按钮。

如果您不想保留纵横比，只需设置图像的宽度和高度。

或者为什么不让“更多”按钮像 Facebook、Google 和页面左侧的其他链接一样浮动？

于 2013-05-06T10:25:39.003 回答