c# - コンテナ Div に従って背景画像のサイズを変更する

Question

image.jpg のような背景画像があります。この画像を使用している div に従って、この画像のサイズを変更したいと思います。

jqueryまたはその他の方法でこれを行うにはどうすればよいですか。

Answer 1

これを行うには、さまざまな方法があります。$().css()実行速度の点で最も優れているのは CSS を使用することですが、jQuery はメソッドを使用して CSS でできることなら何でも実現できます。

これは、画像を挿入するだけでなく、css と jQuery でストレッチするまで、4 つの 5 つの異なるメソッドを使用したフィドルです。コードは以下のとおりです。

<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 に関する参考文献がいくつかあります。