0

画像を背景として設定すると、特定の画像のサイズをコンテナーのサイズに変更するのに問題があります。

#container {
    position: relative;
    height: 400px;
    width: 600px;
    left: 15%;
    border: 1px solid black;
    margin: 0;
    background-repeat: no-repeat;
}
<script language="JavaScript">
  function option1() {
    background="url('image.png')";
    document.getElementById('container').style.backgroundImage = background;
  }
</script>
.
.
.
.
<a href="#" id="b1" onclick ='option1()'>x</a>

私は基本的に、リンク (x) をクリックするとコンテナーの背景が変わるようにしようとしています。画像はすべて異なるサイズであり、関数を呼び出しているときにコンテナに合わせて画像を変更またはサイズ変更する方法を見つけようとしています。何も見つからなかったので、あきらめて、画像エディターで各画像をコンテナーのサイズに手動でサイズ変更しました。これを回避する他の方法はありますか？私はJavascriptが初めてで、他のコードを調べてみましたが、ループに陥ることがあります。

__________________________________________
|                                        |
|                                        |
|                                        |
|__________________________________x_x_x_|
4

1 に答える 1

1

ここで実際の動作を確認できます: http://jsfiddle.net/Shmiddty/Akypk/

関連する CSS は次のとおりです。

background-size:100% auto;

画像はコンテナの幅いっぱいに表示され、高さは比例して拡大/縮小されます。

于 2012-10-10T23:01:54.420 に答える