9

英語のネイティブ スピーカーではないので、質問を形作るためのより良い方法があると思われます...とにかく:

私が作成したいのは、ここのヘッダーに似ています: http://thegreatdiscontent.com/adam-lisagor ヘッダー画像はすべての画面サイズで完全に表示され、画像の縦横比はもちろん常に正しいです。これは を使用して作成され、position: absolute を使用してテキストが表示されます。

ただし、背景画像に の代わりに css を使用すると、次のヘッダーのようなものが得られます 。

2 番目のリンクのように background-image css プロパティを使用して、aa div の外観と動作を最初のリンクのようにすることは可能ですか? または、すべての画面サイズで完全に表示されるようにするには、ヘッダー全体の動作を変更し、背景に を使用する必要がありますか?

何も残さないヘッダーの背景が欲しいのですが、このように修正されています http://getflywheel.com/ これまでの唯一のアイデアは、画像の正しい比率を持つ透明なpngを作成することです。 background-attachment:fixed を持つ background-image を使用します。しかし、これはあまりスマートではないようです。

うまくいけば、私は理解できるように十分に明確でした. よろしくお願いします！

4

5 に答える 5

19

以下は、css/html のみを使用したシンプルで優れたヒントです。

材料

  • 希望の比率の透過 PNG 画像 (transparent-ratio-conserver.png)

  • 鬼ごっこ

  • ビューポートごとに異なる画像 (retina.jpg、desktop.jpg、tablet.jpg...)

アイデアは、タグを開き、それに透明な画像を割り当てることです（目的の比率で）。また、すべて HTML である class="responsive-image" も追加します。

<img src="img/transparent-ratio-conserver.png" class="responsive-image">

CSS では、background-size を に合​​わせて設定し、画像の幅を選択します。

.responsive-image{
    width: 100%;
    background-size: 100% 100%;
}

最後に、すべてのビューポートに適切な画像を提供します。

/* Retina display */
@media screen and (min-width: 1024px){
    .responsive-image{
        background-image: url('../img/retina.jpg');
    }
}
/* Desktop */
@media screen and (min-width: 980px) and (max-width: 1024px){
    .responsive-image{
        background-image: url('../img/desktop.jpg');
    }
}
/* Tablet */
@media screen and (min-width: 760px) and (max-width: 980px){
    .responsive-image{
        background-image: url('../img/tablet.jpg');
    }
}
/* Mobile HD */
@media screen and (min-width: 350px) and (max-width: 760px){
    .responsive-image{
        background-image: url('../img/mobile-hd.jpg');
    }
}
/* Mobile LD */
@media screen and (max-width: 350px){
    .responsive-image{
        background-image: url('../img/mobile-ld.jpg');
    }
}

ここからデモをダウンロードできます。

于 2013-06-21T14:15:29.010 に答える
3

これは background-size プロパティで行います:

background-size: cover;

Cover は、親全体をカバーし、縦横比を維持しながら、画像を可能な限り小さくします。

を試してみることもcontainできます。これにより、親の内部に収まりながら、イメージを可能な限り大きくすることができます。

ソース

MDN - background-size CSS プロパティ

于 2013-04-08T15:36:37.533 に答える
0

他の解決策がありますが。% は、div を画像サイズまたはアスペクト比にスケーリングします。

.responsive-image{
width: 100%;
background-image: url(x.jpg);
background-repeat:no-repeat;
background-size: 100% 100%;

}

于 2013-08-05T19:56:33.620 に答える