調整div背景圖片的大小

Question

我必須在3格內設置背景圖像（精靈png）。 我需要用div大小來調整png的大小，因為它是一種流暢的布局。

我一直在尋找解決方案，只能在html中使用<img>找到解決方案。 我很欣賞這是一種處理情況的簡便方法，但是需要使用背景圖片。 我需要背景圖片的解決方案-不建議使用<img> ！

我意識到css3提供了可能的背景大小解決方案，但這對IE7和IE8以及其他非css3瀏覽器沒有幫助。 我很高興使用jquery，但無法想到如何動態調整png的大小以適合div。

非常感謝您的幫助，但是請理解，我無法使用<img> 。

這是我的CSS：

a.bigButton {
height:30%;
width:30%;
display:block;
float:left;
}
a.bigButton#btn-menus:link {
background:url(images/btn-menus-large.png) top center no-repeat;
background-position: 0 0;
}
a.bigButton#btn-menus:hover {
background-position: -298px 0;
}
a.bigButton#btn-functions:link {
background:url(images/btn-functions-large.png) top center no-repeat;
background-position: 0 0;
}
a.bigButton#btn-functions:hover {
background-position: -298px 0;
}
a.bigButton#btn-packages:link {
background:url(images/btn-av-large.png) top center no-repeat;
background-position: 0 0;
}
a.bigButton#btn-packages:hover {
background-position: -298px 0;
}

我的html：

<div id="quick-links-holder">
<a href="#" alt="Check out our menus" class="scroll bigButton btnResize" id="btn-menus"></a>
<a href="#" alt="What function will you hold at Events Centre?" class="scroll bigButton btnResize addMargin" id="btn-functions"></a>
<a href="#" alt="Check out our functions and packages" class="scroll bigButton btnResize addMargin" id="btn-packages" ></a>
</div>

Answer 1

由於您不願意使用img元素，因此根本不可能。

這就是CSS3引入background-size的確切原因。

Answer 2

無法使用簡單的CSS，但是您可以由第三方調整背景圖片的大小。