294

多くのページとさまざまな背景画像を含むサイトがあり、CSS から次のように表示します。

body.page-8 {
    background: url("../img/pic.jpg") no-repeat scroll center top #000;
    background-size: cover;
}

ただし、要素を使用して 1 つのページに異なる (フルスクリーン) 画像を表示し<img>たいのですが、上記のプロパティと同じプロパティが必要です background-image: cover;(画像は CSS から表示できず、HTML ドキュメントから表示する必要があります)。

通常、私は使用します：

div.mydiv img {
    width: 100%;
}

または：

div.mydiv img {
    width: auto;
}

画像を完全かつ応答性の高いものにします。ただし、画面が狭くなりすぎると画像が縮小しすぎて ( width: 100%)、下画面にボディの背景色が表示されます。もう 1 つの方法でwidth: auto;ある は、画像をフル サイズにするだけで、画面サイズには応答しません。

同じように画像を表示する方法はbackground-size: coverありますか？

4

14 に答える 14

1

と の両方 min-heightを設定してみてください。min-widthdisplay:block

img {
    display:block;
    min-height:100%;
    min-width:100%;
}

(フィドル)

画像の包含要素がposition:relativeまたはposition:absoluteの場合、画像はコンテナーを覆います。ただし、中心にはなりません。

margin-left:-50%画像が水平方向にオーバーフローするか ( set ) または垂直方向にオーバーフローするか ( set ) がわかっている場合は、画像を簡単に中央に配置できますmargin-top:-50%。それを理解するために、CSS メディア クエリ (およびいくつかの数学) を使用できる場合があります。

于 2013-11-06T01:20:52.050 に答える
0

私は「コメントを追加する」ことを許可されていないので、これを行うことはできますが、ええ、ペンクマンがしたことはかなり的を射ています。背景カバーのようにするには、変更するだけです。

.tall-img{
    margin-top:-50%;
    width:100%;
}
.wide-img{
    margin-left:-50%;
    height:100%;
}

に

.wide-img{
    margin-left:-42%;
    height:100%;
}
.tall-img{
    margin-top:-42%;
    width:100%;
}

于 2014-11-17T06:24:48.283 に答える
-1

IE6 の場合、2 行目も含める必要があります - width: 100%;

.mydiv img {
    max-width: 100%;
    width: 100%;
}
于 2013-06-21T15:11:58.360 に答える
-2 
background:url('/image/url/') right top scroll; 
background-size: auto 100%; 
min-height:100%;

まったく同じ症状が発生しました。上記は私のために働いた。

于 2013-11-06T00:42:11.117 に答える