3

比率の制約を使用して、現在 Windows Vista でラップトップを使用している場合のエクスペリエンスを再現しようとしています。画面サイズに応じてラップトップの画像をスケーリングし、 #Screen 内のすべてを画面サイズに相対的に拡大したいと思います。

現時点では、.MenuBar の高さは 4% です。これは、おおよそのパーセントである必要がありますが、#Screen の下部に tar を配置する方法がわかりません。 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

まず、いくつかのことを提案します。

  • まず、画像をユーザーの画面のサイズに合わせて拡大縮小するには、 and要素の and を 100%に設定widthしheightます。次に、パーセンテージを設定して要素をスケーリングすることもできます。bodyhtml#Laptopwidthheight
  • 画面を正しく配置するには、#Laptopdiv がposition: relativeまたはであることを確認してposition: absoluteください。をrelative適用することで、ラップトップを中央に配置しやすくしていましたmargin: 0 auto。
  • 、、、およびプロパティ#Laptopを使用して、画面とそのすべてのパーツを に配置できるようになりました。lefttoprightbottom

私がまとめたjsFiddleをチェックしてください：

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

これは目的の結果に到達するための 1 つの方法にすぎないことに注意してください。他のオプションもあります。

于 2013-06-11T03:25:29.877 に答える