このウェブサイトと同じ効果を再現しようとしています。http://www.knockknockfactory.com/
ブラウザの幅を変更すると、画像は自動的に小さくなりますが、画像が占める領域の高さは変わりません。
これを再現しようとすると、画像は小さくなりますが、高さが変わってしまいます。
今のところ、私のコードは以下の通りです。
<div id="image"><img src="cover.png" /></div>
CSSです。
body {
margin: 0;
padding: 0;
}
img {
max-width: 100%;
height: auto;
}
このサイトのように、CSSを使って、ブラウザのリサイズ時に画像の高さを変えずに増減させるにはどうしたらいいですか?
私は以前のサイトでPerfect Full Page Background Imageを使ってこれを実現しました。
モダンブラウザに対応するだけであれば、background-size: cover;を使ってもいいでしょう。
CSSのMedia Queries(メディアクエリ)について学んでみてはいかがでしょうか。あなたが参照しているサイトも同じものを使用しています。このサイトでは基本的に、ブラウザのウィンドウサイズが変わるたびに異なるCSSを使用しています。 以下にサンプルのリンクを示します。
http://css-tricks.com/css-media-queries/を参照してください。
リンク先のサイトでは、画像の幅を変更するのではなく、実際にカットしています。そのためには、画像を背景画像として設定する必要があります。
background-image`についての詳しい情報はhttp://www.w3schools.com/cssref/pr_background-image.aspをご覧ください。
使い方。
#divID {
background-image:url(image_url);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}