Question

使用约束比例，我试图复制目前在Windows Vista上使用笔记本电脑的体验。我希望笔记本电脑的图像可以缩放，具体取决于屏幕尺寸以及#Screen内部与屏幕尺寸相关的任何内容。

目前，.MenuBar的高度是4％，因为它大致是它应该的百分比，但是我不知道如何在#Screen的底部有焦油因为我认为这将是边缘-top：96％;,但我目前的保证金最高百分比：56％;显示栏大致位于底部。

我想知道如何不仅根据用户屏幕缩放我的笔记本电脑，例如使用百分比，而是包括缩放的图像以及两者都居中。屏幕已经从笔记本电脑图像中剪切出来以复制屏幕定位，最后屏幕内的所有内容都与屏幕相对，屏幕位于笔记本电脑图像后面。

我有点困惑，我希望我的上述措辞不会引起混淆，如果是这样，我道歉。

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

源代码视图：

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

最诚挚的问候，添

Answer 1

开始我会建议一些事情：

首先，要将图片缩放到用户屏幕的大小，请将width和height元素的body和html设置为100％。然后，您可以通过设置百分比#Laptop和width来扩展height元素。
要使屏幕正确定位，请确保#Laptop div为position: relative或position: absolute。我使用relative通过应用margin: 0 auto。
现在，您可以使用#Laptop，left，top和right属性将屏幕及其所有部分放在bottom上。

查看我放在一起的jsFiddle：

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

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

苦苦挣扎着设置图像和div与百分比

1 个答案: