javascript - ブラウザのサイズに依存する画像のスケーリングサイズ

Question

このサイトを例として使用: http://www.reebok.com/en-GB/

ヘッダー div の高さはブラウザーのサイズに応じて調整され、内部コンテンツの高さと幅は 100% になります。

これは JavaScript によって制御されますか? CSS のみで実行できますか?

Answer 1

これを行うには、html と css を使用する必要があります。次のように書きます。

img{
 width:100%;
 height:auto;
}

これをチェックしてくださいhttp://jsfiddle.net/e8V47/

Answer 2

あなたのページでは、実際に使用されているのは Javascript です。

コンテナーの高さはインラインで変更されます (style属性)

<div class="module module-hero use-full-width displayed" data-module="Hero" style="height: 232px;">

%ただし、 in heightを使用して CSS で同様のことを行うことは可能です。例えば ​​：

.module{
   height:40%;        // A percentage relative to the parent element
}

Answer 3

あなたの例の画像はブラウザによって調整されています。幅または高さのみを設定すると、ブラウザは別のものを自動的に調整します。