web-dev-qa-db-ja.com

ブラウザの幅を変更しても自動的に画像のサイズを変更する方法はありますが、同じ高さを維持しますか？

このウェブサイトと同じ効果を再現しようとしています： 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を使用して同じ高さを維持するにはどうすればよいですか？

htmlcssimageresize
9
Ned

Perfect Full Page Background Image を使用して、以前のサイトでこれを実現しました。

最新のブラウザのみをサポートする必要がある場合は、background-size：cover;を使用できます。

4
Jeremy Gallant

それは古い質問ですが、CSSのみでビューポートサイズに応じて画像のサイズを変更したい場合は追加します。ビューポート単位「vh（ビューポートの高さ）またはvw（ビューポートの幅）」を使用できます。

.img {
width: 100vw;
height: 100vh;
}

ブラウザのサポートを参照

3
eren130

高さの調整に問題があるため、これを使用できる場合があります。 http://jsfiddle.net/uf9bx/1/

img{
width: 100%;
height: 100%;
max-height: 300px;
}

画像のサイズや場所は正確にはわかりませんが、おそらくこれが役立つでしょう！

2
Matt

希望する効果を得るには、背景画像を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%;
}
1
Derek Story

リンクしたWebサイトは画像の幅を変更しませんが、実際には切り取ります。そのためには、背景画像として設定する必要があります。

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;
}
0
Mohammad Areeb Siddiqui

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

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

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

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

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

0
bob

CSSのメディアクエリについて学習する必要があります。参照しているサイトは同じものを使用しています。このサイトは基本的に、ブラウザのウィンドウサイズが変化するたびに異なるCSSを使用しています。サンプルのリンクはこちら

http://css-tricks.com/css-media-queries/

0
vendettamit