调整移动设备的背景图像大小

Question

那时候,我一直在玩我的网站,并在一些图像上添加一个"新"横幅,我这样做是我能想到的最简单的方法,如下所示.

<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/

谢谢

Answer 1

试试这个:

.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;

}

来源(S)

MDN - 背景大小 - CSS