0

div (または他のタグ) を指定すると、タグ (サイト バナーを考えてください) の上に大きな「レスポンシブ」画像を追加できます。この画像は最大幅と高さを持ち、高さを調整しながらブラウザーの幅の 100% に収まるようにスケーリングします。 cssのみを使用して自動的に？

私は3つの異なる方法を試しましたが、それぞれに大きな欠点があります. ここのすべてのメソッドで使用される html です。#nav は、上の画像を追加しようとしている場所です。

<ul id="nav">
    <li>link</li>
</ul>

方法 1

:before と content:url(img); の使用

CSS:

#nav:before {
    content:url('http://lorempixel.com/output/nature-q-c-780-480-5.jpg');
    width:100%;
    display:block;
    overflow:hidden;
}

この方法は高さを正しく保ちますが、画面のサイズを縮小すると画像の右側が非表示になります。コンテンツ画像を適切にスケーリングする方法が見つかりませんでした。

メソッド1のJSFiddle

方法 2

:before と background:url() を使用すると、画像を適切にスケーリングできましたが、高さの値を変更できず、画像の下に巨大な領域ができました。

#nav:before {
    background:url('http://lorempixel.com/output/nature-q-c-780-480-5.jpg') no-repeat top;
    background-size:contain;
    width:100%;
    display:block;
    content:"";
    height:400px;
    max-height:480px;
}

メソッド 2 の JSFiddle

方法 3

目的の効果をある程度達成することができましたが、パディングトップは、画像の高さと幅の比率を知ることに依存しています。(これがどのように機能し、なぜこの計算が必要なのか、css 用語で理解できません)。したがって、正方形の画像の場合、その X/X = 1 または 100% の高さになります。480x780 の画像の場合は 61.53% です。

#nav {
    background:url('http://lorempixel.com/output/nature-q-c-780-480-5.jpg') no-repeat top center;
    background-size:contain;
    padding-top:61.53%;
    width:100%;
    display:block;
    height:100px;
    overflow:hidden;
}

この方法では目的の結果が得られますが、画像の高さと幅を常に把握できるとは限りません。だから私はより良い解決策を探しています。

また、異なるサイズと追加の画像ごとにメディア クエリを作成できることも認識していますが、それでは多くの作業が必要です。

メソッド 3 の JSFiddle

これらの方法のいずれかを改善する方法についてのアイデアはありますか?

4

1 に答える 1

0

うーん、私はあなたが正しいことを願っています。これはナビゲーションの上の画像で、常に幅 100% です (ブラウザーのサイズと同じ)。サイズ変更時に拡大縮小し、縦横比が影響を受けないように高さが自動的に計算されます。

HTML

<img class="banner" src="http://lorempixel.com/output/people-q-c-1200-200-9.jpg">
<ul>
    <li><a href="">link</a></li>
</ul>​

CSS

img.banner {
    width: 100%;
}​

フィドル

http://jsfiddle.net/7HgU8/

于 2012-10-11T21:56:10.233 に答える