3

私は何時間も検索してきましたが、今こそ質問する時だと思います。ヘッダーに配置されている背景画像を画面に合わせることができません。あらゆる種類のコンピューターの解像度で問題なく動作しますが、問題が発生するのは、電話で表示しているときに縮小したくない場合です. min-height、max-height を実行しました。すべてを試しました。問題の一部は、ヘッダー div 自体がこの画像よりも小さいことだと思いますが、実際にはわからないので、ガイダンスが必要です。 m は CSS シーンでは比較的新しいものです。

これが私が持っているものです：

#header {
    background-image: url('http://hamsoc.polymath.io/wp-content/uploads/2013/05/hamsocheader.png');
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 209px;
}

ウェブサイトの URL はhttp://hamsoc.polymath.ioです。

事前に助けてくれてありがとう！

Duncan Beattie が答えを教えてくれました。彼が言ったことは次のとおりです。

「背景画像の高さを div の固定高さ 209px に合わせた background-size: cover があります。固定高さを削除し、padding-bottom:15% に置き換えます。これにより、div のアスペクト比が維持されます。同じで、ビューポートが小さくなるにつれて画像をスケーリングします。」

4

4 に答える 4

1

背景画像ではなく HTML にヘッダー画像を配置し、次のmax-widthように設定することをお勧めします。

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

これにより、ヘッダー ロゴで一般的に必要とされる画像を「クリック可能」にすることもできます。

デモフィドル

全画面表示

于 2013-05-17T16:02:21.900 に答える
0

割合を使用して、div の画像の高さを設定しましたか?

では、画像の高さを div の 100% に設定しますか?

そうでない場合は、JavaScript コードを使用してモバイル デバイス上にあるかどうかを検出し、それに応じて高さを設定できますか?

于 2013-05-17T15:55:59.740 に答える