根据容器 Div 调整背景图片大小

Question

我有一个像 image.jpg 这样的背景图片。我想根据正在使用它的任何 div 调整此图像的大小。

我怎样才能在 jquery 或任何其他方式中做到这一点。

Answer 1

有很多不同的方法可以做到这一点。就执行速度而言，最好使用 CSS，但是 jQuery 可以使用 $().css() 方法完成 CSS 可以完成的任何事情。

这里有一个fiddle，它有四种五种不同的方法，从只是将图像放入，到在 css 和 jQuery 中拉伸。代码如下：

<style>
div
{
    background-image : url("http://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Les_Halles_%28metro_de_Paris%29_-_Entree.jpg/800px-Les_Halles_%28metro_de_Paris%29_-_Entree.jpg");

    height : 200px;
    width: 200px;
    margin: 10px;
    background-repeat : no-repeat;
    background-color: blue;
    float: left;
}

#one
{
    background-size:contain;
}

#two
{
    background-size: 100%;
}

#three
{
    background-size: 100% 100%;
}



</style>

<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>

<script>
    $("#a").css("background-size","contain") //fits in aspect ratio
    $("#b").css("background-size","100%") //constrained by width
    $("#c").css("background-size","100% 100%") //stretch to fill
    $("#d").css("background-size","auto 100%") //constrained by height
</script>

希望这可以解决问题。

如果您想探索这些属性并看看还有什么可以做的，有一些关于 CSS 的很好的参考资料。