如何在css中设置背景图像的响应

Question

我在css中的reponsive背景图片中遇到问题，我的css代码是： -

/*** Map ***/

ul#continents {
    list-style: none;
    background: url(images/map.png) no-repeat 0 0;
    position: relative;
    width: 580px;
    height: 268px;  
    margin: 0;
    padding: 0;
}
ul#continents li {
    position: absolute;
}

ul#continents li a{
    display: block;
    height: 100%;
    text-decoration: none;
}

HTML： -

<ul id="continents">
    <li id="northamerica">
        <a href="http://en.wikipedia.org/wiki/North_America">
            <span>
                <strong>North America</strong> 
                Population: 528,720,588
            </span>
        </a>
    </li>

....         

如何设置图像＆＃34; map.png＆＃34;作为回应。

注意：我使用地图工具来悬停任何国家/地区

Answer 1

您可能希望将background-size:与contain或cover一起使用 contain：会使您的背景图片在ul标记内保持比例，但可能无法覆盖所有空间。
cover：将保持背景图像的比例，但在标签内部贴合，它会填充标签，防止出现空白区域。但是，图像可能无法完全显示。