Question

我正在使用框架。我的徽标框包含2张图片。一个是150px，另一个是600px，整个徽标大小为750px。现在，当用户使窗口小于整数时，我的第二张图片正在向下滚动而无法看到图片。

最简单的方法是将2张图片连接成一张750px图片，但有没有办法避免这种情况？

我在徽标框架上的所有代码都是......

<body class="logo_background">
    <img src="assets/logo.png">
    <img src="assets/logo_name.png">
</body>

我的index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Portfolio</title>
</head>
<frameset rows="80px,100%" cols="*" framespacing="0" frameborder="no" border="0">
  <frame src="logo.html" name="logo" scrolling="no">
  <frameset rows="*" cols="150,100%">
    <frame src="menu.html" name="menu" scrolling="no">
    <frame src="main_page.html" name="page" scrolling="no">
  </frameset>
</frameset>
<noframes><body>
</body></noframes>
</html>

Answer 1

使用图像容器上的最小宽度为750px。它将解决问题..我同意@elclanrs ..使用div来实现这一点..框架可能不是最好的方式..

.logo_background{
min-width:760px;/* just to be sure adding an extra 10px */
}

现在，无论窗口大小如何，容器都将拥有760像素，因此您的图片不会丢失它们的位置 - 不要离开视图，您仍然可以向右滚动以查看徽标 - 两者都是.. :)

这是你的问题的小提琴 - http://jsfiddle.net/mvivekc/h4gVe/

Answer 2

只需将徽标框架设计为宽度不小于750像素。我认为这样可行。

当屏幕太小时，防止帧滚动

2 个答案: