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

Question

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

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

Answer 1

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

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

<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 上的一些很好的引用资料。