当屏幕太小时防止框架滚动

发布于 2025-01-03 10:05:27 字数 1124 浏览 1 评论 0原文

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

最简单的方法是将两张图片连接成一张 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>

原文

I'm using frames. My logo frame contains 2 pictures. One is 150px and other 600px making the whole logo size of 750px. Now, when user is making the window smaller than whole number then my second picture is being scrolled down without ability to see the picture.

The easiest possible way would be to connect 2 pictures into one 750px one, but is there a way to avoid this?

All I have as a code on my logo frame is...

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

my 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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

乞讨 2025-01-10 10:05:27

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

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

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

这是一个小提琴对于您的问题 - http://jsfiddle.net/mvivekc/h4gVe/

use min-width on the container of the images to 750px.It'll solve the problem.. and i agree with @elclanrs .. use div's to achieve this.. frames might not be the best way..

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

Now,the container will have 760px no matter what size the window takes,so your pictures dont lose their location -- dont go out of view , you can still scroll right to see the logo's - both of them.. :)

Here's a fiddle for your problem -- http://jsfiddle.net/mvivekc/h4gVe/

回复收藏 0 原文