为移动设备调整背景图片的尺寸

就在那时，我刚刚在玩我的网站，并在一些图片上添加了“新”横幅，我这样做是最简单的方法，我可以认为这是如下..为移动设备调整背景图片的尺寸

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

感谢

来源

2013-04-05 Lee Hibberd

可能重复到：http://stackoverflow.com/questions/7660931/responsive-web-deisgn-how-to-resize-a-background-image-according-to-browser-w – 2013-04-05 10:04:45

道歉，如果是，但我不明白上述问题的问题或答案，所以需要问自己.. – 2013-04-05 10:15:47

试试这个：

.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 - background-size - CSS

来源

2013-04-05 10:04:11 Bill

这似乎没有任何区别..谢谢回答。 – 2013-04-05 10:16:34

尝试背景大小：封面？ – Bill 2013-04-05 10:19:23

不怕，仍然没有..我已经做了一个小提琴，所以你可以看到发生了什么事.. http://jsfiddle.net/bBMdp/ – 2013-04-05 11:06:34

使用background-size:XXpx XXpx;第一值是取宽度和第二值被取高度。

来源

2013-04-05 10:04:54

，这是要放在“.thumbnails .thumbnail img {”部分是啊？如上所述，这似乎没有任何区别。 – 2013-04-05 10:18:01

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

这会缩小背景，所以它只能覆盖整个盒子。

来源

2013-04-05 10:11:09

如上所述，谢谢你的回答，但目前没有任何事情可以做出改变。 – 2013-04-05 10:18:31

为移动设备调整背景图片的尺寸

回答

相关问题