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上有一些很好的参考资料。

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

1 个答案: