javascript - 画像サイズを動的に変更する

Question

常に写真を撮りたいのですが、適切な結果が得られないようです。たとえば、50px (幅) x 100px (高さ) の画像があり、幅を 25px から 100px に、高さを 50px から 200px に変更したい (したがって、画像は幅を高さで割ったままになります)。

どうすればそれを行うことができますか?それは可能ですか?

ここに基本的なコードがあります：

HTML

<div id="container">
<div class="image"><img src="http://libcom.org/files/images/library/black-square.jpg" width="50px" height="100px"/></div>
</div>

CSS

div#container {
    width: 100%;
    height: 100%;
}

div.image {
    position:fixed;
}

score 2 · Accepted Answer

サイズをすぐに変更するには、JavaScript で CSS スタイルを設定するだけです。

var img = document.querySelectorAll("#container .image img")[0];

img.style.height = "200px";
img.style.width = "100px";

サイズを徐々に変化させたい場合は、次の CSS も指定して CSS3 を使用できます。

.image img {
   -moz-transition: height 3s, width 3s;
    -webkit-transition: height 3s, width 3s;
    transition:  height 3s, width 3s;
}

このデモで見られるように: http://jsfiddle.net/jfriend00/6YTmt/

score 0 · Accepted Answer

ここでデモを参照してください: http://jsfiddle.net/jELqu/4/

新しい値を設定するには<yourImg>.style.height、とを使用します。<yourImg>.style.width

3 に答える 3