9

このウェブサイトと同じ効果を再現しようとしています: http://www.knockknockfactory.com/

ブラウザーの幅を変更すると、画像は自動的に小さくなりますが、画像が占める領域の高さは変わりません。

これを複製しようとすると、画像も小さくなりますが、高さが変わりますか?

これまでの私のコードは次のとおりです。

 <div id="image"><img src="cover.png" /></div>

CSS:

body {
    margin: 0;
    padding: 0;
}

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

ブラウザのサイズ変更時に画像を減少/増加させるにはどうすればよいですか?そのWebサイトのようにCSSを使用して同じ高さを維持するにはどうすればよいですか?

4

7 に答える 7

1

目的の効果を得るには、背景画像にして 100% より大きくします: http://jsfiddle.net/derekstory/hVM9v/

HTML

<div id="image"></div>

CSS

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
#image {
    width: 100%;
    height: 500px;
    background: #000 url('http://static.ddmcdn.com/gif/dog-9.jpg') center no-repeat;
    background-size: auto 200%;
}
于 2013-06-26T16:05:51.953 に答える
0

画像の幅を変更すると、高さが自動的に変更されます...

この機能を使用したい写真は何枚ですか? それがたくさんあり、それらがすべて異なる高さを持っている場合は、おそらく高さも変更する必要があります.

高さ 400px の 5 つの画像があるとします。HTML でこれらの 5 つのタグに固定のクラスを指定します。

.fixed { width: 100%; height: 500px !important }

これにより、幅が変更されますが、高さは同じに保たれます。

于 2013-06-26T16:06:26.350 に答える