HTML中链接的可缩放背景图像

在HTML（使用CSS）中，我使用以下代码创建具有背景图像的链接列表（或者更确切地说：链接左侧的图像）：

HTML:

<ul>
    <li><a class="share_fb" href="#">Like on Facebook</a></li>
    <li><a class="share_tw" href="#">Share on Twitter</a></li>
    <li><a class="share_gp" href="#">+1 on Google Plus</a></li>
</ul>

a {
    font-size: 1.4em;
}
a.share_fb {
    background: transparent url(images/share_fb.png) scroll no-repeat left center;
    padding: 0.1em 0 0.1em 0.4em;
}
...

<div id="container">
    <a href="#" class="img">
        <img src="http://www.google.co.uk/images/srpr/logo3w.png" /><span>Google</span>
    </a>
</div>

#container{width:200px; height:200px; background:red;}
a{display:block;position:relative; width:150px; height:150px; background:yellow;}
a img{display:block; position:relative; width:50%; height:50%;}
a span{display:block; position:absolute; background:green; top:10px; left:10px;}

问题是：我尽最大努力使整个页面可伸缩。但是当涉及到背景图形时：应该如何做到这一点？这些背景图像的最佳尺寸是什么？它们可能不大于文本行，但应在文本大于时缩放。

尝试添加：

background-size: contain;

---

到你的

a.share\u fb

班级。这将使背景图像缩放到元素的全高（而不是文本的宽度）。

背景大小：包含（或以百分比、px等表示的值）适用于CSS3

否则，对于CSS2（IE8等），定位是必要的：

HTML:

<ul>
    <li><a class="share_fb" href="#">Like on Facebook</a></li>
    <li><a class="share_tw" href="#">Share on Twitter</a></li>
    <li><a class="share_gp" href="#">+1 on Google Plus</a></li>
</ul>

a {
    font-size: 1.4em;
}
a.share_fb {
    background: transparent url(images/share_fb.png) scroll no-repeat left center;
    padding: 0.1em 0 0.1em 0.4em;
}
...

<div id="container">
    <a href="#" class="img">
        <img src="http://www.google.co.uk/images/srpr/logo3w.png" /><span>Google</span>
    </a>
</div>

#container{width:200px; height:200px; background:red;}
a{display:block;position:relative; width:150px; height:150px; background:yellow;}
a img{display:block; position:relative; width:50%; height:50%;}
a span{display:block; position:absolute; background:green; top:10px; left:10px;}

-更改锚的宽度和高度。将完整尺寸的图像宽度和高度更改为100%

---

链接还包括css3版本

谢谢！关于兼容性，你能说些什么？由于CSS文档没有doctype左右，浏览器不知道我是使用CSS 2还是CSS 3。。。或者我可以任意混合吗？谢谢！第一种解决方案似乎是理想的。然而，可能存在兼容性问题。但是第二个解决方案并不是我想要的（如果你将它与我问题中的示例进行比较…），如果你想让它跨浏览器工作，选项1是唯一没有js的可行选项