html - ウィンドウの画像の高さの割合を指定する方法

Question

ヘッダーに、ウィンドウの高さの 10% にしたいロゴタイプがあります。

<header style="float: left; height: auto; width: 100%;">
<img src="..." style="float: left; height: 10%;" />
</header>

これにより、画像のサイズがまったく変更されなくなります。この問題を解決するにはどうすればよいですか?

score 0 · Accepted Answer

それが良い方法かどうかはわかりませんが、私のcssには次のものがあります：

html{
   height:100%;
}

body{
   height:100%;
}

編集：ヘッダーの高さは本文の10％、画像はヘッダーの100％にする必要があります....

<header style="float: left; height: 10%; width: 100%;>
     <img src='...' style="float: left; height: 100%;" />
</header>

score 0 · Accepted Answer

おそらく、Header の高さが _parent 要素から 10% になるように設定できます (親が<body>要素である可能性もあります)。

次に、img を高さの 100% に合わせます。

だから何かのために

<body>
<header>
<img src="" />
</header>
</body>

あなたは持っているかもしれません:

body {
height: 100%;
}

header {
height: 10%;
}

img {
height: 100%;
}

確かに、単なるアイデアです。考えてみれば、これに基づいた巧妙な解決策を見つけることができますが、この簡単なアプローチよりも巧妙です ;)

3 に答える 3