4

その時、私は自分のサイトで遊んでいて、いくつかの画像に「新しい」バナーを追加しました.

<img style="background:url(images/pic3.jpg)" src="images/new.png" alt="" /></a>

画像はすでにサイトに適したサイズであるため、デスクトップで表示すると問題なく動作しますが、モバイルデバイスで表示すると、.png 画像は縮小されますが、背景画像は縮小されません..

私はcssから何かが欠けていることを知っていますが、私はまだ学んでいるので、何が欠けているのか正確にはわかりません..

これが私のhtmlのもう少しです..

<div class="thumbnail">
    <a href="#">
        <img style="background:url(images/pic3.jpg)" src="images/new.png" alt="" />
             </a>
                 </div>

そして、これが問題のモバイルCSSです..

.thumbnails
{
}

    .thumbnails .thumbnail
    {
        border-top: solid 1px #e5e5e5;
        padding-top: 2em;
        margin-top: 2em;
    }

    .thumbnails .first
    {
        border-top: 0;
        padding-top: 0;
        margin-top: 0;
    }

    .thumbnails .thumbnail img
        {
            margin-top: 5px;
            height: 180px;
            margin-right: 8px;
        }

    .thumbnails .thumbnail blockquote
        {

            margin-left: 143px;
        }

基本的に、前景画像（.png画像）のように背景画像を縮小する方法を知る必要があります

誰かが助けてくれると確信しています。

編集：ここに簡単なフィドルがあるので、何が起こっているのかを見ることができます... http://jsfiddle.net/bBMdp/

ありがとう

4

3 に答える 3

6

これを試して：

.thumbnails .thumbnail img{
    margin-top: 5px;
    height: 180px;
    margin-right: 8px;

    background-size: 100% 100%;

}

または：

.thumbnails .thumbnail img{
    margin-top: 5px;
    height: 180px;
    margin-right: 8px;

    background-size: cover;

}

ソース

MDN - 背景サイズ - CSS

于 2013-04-05T10:04:11.147 に答える
1

background-size:XXpx XXpx;最初の値は幅を使用し、2 番目の値は高さを使用します。

于 2013-04-05T10:04:54.670 に答える