Javascriptで画像の大きさを%指定したい

解決済

質問者：remokon
質問日時：2014/12/23 01:30
回答数：2件

imgタグで、画像の大きさをwidth="50%"と元の大きさを基準に指定できます。

そしてJavaScript中で
　　window.event.srcElement.width = 123
として、大きさを指定できますが、JavaScript中で
　　window.event.srcElement.width = "50%"
とすると失敗します。

JavaScript中にて、パーセントで指定できないのでしょうか。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： Ogre7077
回答日時：2014/12/24 14:20

No.1 です

> ところで、逆に現在のscaleの値も得ることが出来るでしょうか。
> 画像をクリックするたびに、25%->50%->100%->25%->...としたいのです。

スクリプト上で現在の style の設定値を読み取るのは、
なかなかに面倒な処理になりがちです。

参考
https://developer.mozilla.org/ja/docs/Web/API/wi …

なので style ではなく class を読み書きしては如何でしょうか。
以下 HTML5/CSS3 での実装例です。

<style>
img.quarter { transform:scale(0.25); }
img.half { transform:scale(0.5); }
img.regular { transform:scale(1); }
</style>
<script> document.addEventListener('click', function(ev){
var A = [ 'quarter', 'half', 'regular' ];
var x = ev.target;
if (! x instanceof HTMLImageElement) return;
var i = A.reduce(function(p,v,i){return x.classList.contains(v)? i: p},-1);
if (i < 0) return;
x.classList.remove(A[i]);
x.classList.add(A[ (i+1) % A.length ]);
}, false)</script>

<body>
<p><img src=dummy1.jpg class=regular> クリックにより拡大縮小、初期100%
<p><img src=dummy2.png class=half> クリックにより拡大縮小、初期50%
<p><img src=dummy3.gif> 対象外の画像

- 0
- 件

通報する

この回答へのお礼

返答ありがとうございます

内容が高度で私では理解できません。
残念ながら今回は諦めます。

今後もおねがいします

通報する

お礼日時：2014/12/25 00:42

No.1

回答者： Ogre7077
回答日時：2014/12/23 15:08

<img width> に指定する値ですが、

以前はパーセントによる割合でも大丈夫でしたが、
最近の HTML では「ピクセル数」のみと厳格化されました。

http://momdo.github.io/html5-diff/#changed-attri …

というわけで

var s = event.srcElement;
s.width = s.width / 2 | 0;

とか

s.style.transform = "scale(0.5,1)";

なぞ如何でしょうか