Scalable фонового изображения для ссылок в 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 класса. Это должно сделать масштаб фонового изображения на всю высоту элемента (а не ширину из-за текста).

Answer 2

background-size: contain; (или значения, в процентах, px и т. Д.) Работает для CSS3.

В противном случае, для CSS2 (IE8 и т.д.), позиционирование необходимо:

HTML:

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

Click here to see it in action - изменить ширину и высоту якоря. Измените ширину и высоту изображения на 100% для полного размера

Ссылка также включает css3 версию