CSSの高さの割合がスケーリングされていない画像

ウェブサイトの上部を作成して、左側にロゴ、右側にナビゲーションバーを作成しようとしています。画像はHDTVで使用される可能性があると言われ、うまく拡大するようにしたいので、画像が大きくなります。私は、同じdivにロゴとナビゲーションバーを置くと、高さにパーセンテージを適用することができたので、常に画面の上位10％になりますが、コードでは縮尺が変わらないと思っていました。同じ画像サイズ。どんな助けでも大歓迎です。CSSの高さの割合がスケーリングされていない画像

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

そして、これは

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

を使用してCSSのイムです私は本当に誰の助けをいただければ幸いです。

出典

2013-02-21 user2093601

イメージ自体の縮尺を変更しようとする場合は、イメージを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-21 01:36:17

。他のアイデア？ – user2093601

@ user2093601私の[jsfiddle example]（http://jsfiddle.net/JvgtX/show/）の10％フレーム内で画像の縮尺が変わります。何がうまくいきませんか？ –

ああ申し訳ありませんが、stackoverflowのサンプルコードはimgの高さを示しています：100％ではなく10％。 JSのフィドルの例では、img要素に10％の高さが適用されています。 img要素が親のトップdivのプロパティを受け取り、調整するべきではありませんか？つまり、なぜ私は包含div 'トップ'を10％にして、imgにそのサイズプロパティを継承させることができないのでしょうか？ – user2093601

あなたはそれがdiv要素に応じてスケールアップを知っているように、画像には10％の高さを与える必要があります。あなたがそれをするなら、それはうまくいくと私は信じています。

#top img { 
    height: 10%; 
}

編集：jsFiddle実際にそれを大きくするようだが、少なくとも、それはスケール

出典

2013-02-21 01:40:40

それは縮尺を変えます。イメージはdivのプロパティを継承してはいけないので、100％を割り当てることができますか？ – user2093601

floatは通常のフローから要素を取り出すので、 '＃top'は実際には空です（高さ：0px）。 –

これはもちろん、 '＃top'の内容を浮動させたいと仮定しています。 –

CSSの高さの割合がスケーリングされていない画像

答えて

関連する問題