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

Question

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

CSS:

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

问题是:我尽力使整个页面可缩放。但是当涉及到背景图形时:应该如何做呢？哪种尺寸最适合这些背景图片？它们可能不会大于文本行，但应随文本缩放。

Answer 1

尝试添加:

background-size: contain;

到您的a.share_fb 类(class)。这应该使背景图像缩放到元素的整个高度(不是文本的宽度)。