我有一个像 image.jpg 这样的背景图像。我想根据使用它的任何 div 调整此图像的大小。
我怎样才能在 jquery 或任何其他方式中做到这一点。
有很多不同的方法可以做到这一点。就执行速度而言,最好的方法是使用 CSS,但 jQuery 可以使用该$().css()
方法完成 CSS 可以完成的任何事情。
这里有四种五种不同方法的小提琴,从只是放入图像,到在 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 上有一些很好的参考资料。