9

左側にロゴ、右側にナビゲーションバーを保持するために、Webサイトの上部を作成しようとしています。HDTVで使用される可能性があると言われ、適切に拡大縮小したいので、画像は大きくなります。ロゴとナビゲーションバーを同じdivに配置すると、高さにパーセンテージを適用できるので、常に画面の上位10％になりますが、コードに合わせて拡大縮小されるのではなく、同じ画像サイズ。どんな助けでも大歓迎です。

<body>
<div id="container">
    <div id="top">
    <img src="images/logo.png" alt="logo">
    <ul>
    <li><a href="#" title="1">1</a></li>
    <li><a href="#" title="2">2</a></li>
    <li><a href="#" title="3">3</a></li>
    <li><a href="#" title="4">4</a></li>
    <li><a href="#" title="5">5</a></li>
    </ul>
    </div>
</div>

そしてこれはCSSimを使用しています

#top {
height: 10%;
width: 100%
}

誰かの助けを本当にいただければ幸いです。

4

2 に答える 2

4

画像自体を拡大縮小しようとしている場合は、CSSで画像をターゲットにする必要があります。

また、スケーリングに最小（場合によっては最大）の制限を設定することをお勧めします。小さくすると見栄えが悪くなり、使えなくなるポイントがあります。

html, body, #container {
    height: 100%;
    width: 100%;
}

#top {
    height: 10%;
    width: 100%;
    min-height: 23px;
}

#top img {
    height: 100%;
    width: auto;
    min-height: 23px;
    min-width: 136px;
}

jsfiddle

于 2013-02-21T01:36:17.290 に答える
1

div に合わせてスケーリングできるように、画像の高さを 10% にする必要があります。そうすればうまくいくと思います。

#top img {
    height: 10%;
}

編集：jsFiddle

于 2013-02-21T01:40:40.013 に答える