3

使用约束比例，我试图复制当前在 Windows Vista 上使用笔记本电脑的体验。我希望笔记本电脑图像根据屏幕尺寸和#Screen 内的任何内容进行缩放以相对于屏幕尺寸。

目前，.MenuBar 的高度是 4%，因为这大约是它应该的百分比，但是我不知道如何在 #Screen 底部放置焦油，因为我认为这将是顶部边缘： 96%;，但我目前的利润率最高百分比：56%；大致在底部显示栏。

我想知道如何不仅通过使用百分比来根据用户屏幕缩放我的笔记本电脑，而且还包括正在缩放的​​图像并且两者都居中。屏幕要定位在笔记本电脑图像后面，因为屏幕已从笔记本电脑图像中切出以复制屏幕定位，最后屏幕内的所有内容都与屏幕相关。

我有点困惑，我希望我的上述措辞不会令人困惑，如果是这种情况，我深表歉意。

网站查看：https ://tornhq.com/Laptop/index.html

JSFiddle 视图：http: //jsfiddle.net/JAjMY/

源代码查看：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <style>
            html, body {
                margin:0;
                padding:0;
            }

            #Laptop {
                margin:0 auto;
                width:545px;
                height:373px;
                background:url(images/laptop.png) no-repeat;
                z-index:1;
            }
            #Laptop .Screen {
                position:absolute;
                width:395px;
                height:221px;
                margin-top:26px;
                margin-left:75px;
                background:#03F;
                z-index:2;
            }
            #Laptop .MenuBar {
                position:relative;
                width:100%;
                height:4%;
                margin-top:56%;
                background:url(images/Microsoft/Vista/MenuBar.png) repeat-x;
                background-size:100% 100%;
            }
        </style>
    </head>
        <div id="Laptop">
            <div class="Screen">
                <div class="MenuBar">

                </div>
            </div>
        </div>
    <body>
    </body>
</html>

最好的问候，蒂姆

4

1 回答 1

0

首先，我会建议一些事情：

  • 首先，要使图像缩放到用户屏幕的大小，请将您的和width元素设置为 100%。然后，您也可以通过设置百分比来缩放元素。heightbodyhtml#Laptopwidthheight
  • 要使屏幕正确定位，请确保#Laptopdiv 为position: relative或position: absolute。我过去常常relative通过应用margin: 0 auto.
  • #Laptop您现在可以使用left、top、right和bottom属性将屏幕及其所有部分定位在 上。

查看我放在一起的 jsFiddle：

http://jsfiddle.net/m3ta/y4Exs/

请记住，这只是达到预期结果的一种方法，还有其他选择。

于 2013-06-11T03:25:29.877 回答