调整移动设备背景图片大小

Question

调整移动设备背景图片大小

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 图片）一样缩小即可。

我相信有人可以帮忙，提前致谢。

编辑：这里有一个快速的 fiddle，你可以看到正在发生的事情... http://jsfiddle.net/bBMdp/ 谢谢。

- Lee Hibberd

1

可能是重复内容：https://dev59.com/9FvUa4cB1Zd3GeqPyO7R - t.niese

抱歉，如果我理解错了问题或上面的答案，所以需要自己问一下。 - Lee Hibberd

3个回答

1

使用background-size:XXpx XXpx;，第一个值为宽度，第二个值为高度。

- Akhil Thesiya

这个要放在“ .thumbnails .thumbnail img{ ”的部分，对吧？和上面一样，这似乎没有任何区别。 - Lee Hibberd

0

-webkit-background-style: cover;
-moz-background-style: cover;
-o-background-size: cover;
background-style: cover;

这将缩小背景图像，使其足够大以覆盖整个框。

- David Goss

以上所述，感谢您的答复，但目前似乎没有任何改变。 - Lee Hibberd

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bill · Accepted Answer

试试这个：

.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