CSSのないJavaScriptクラスの画像をサイズ変更

Question

私は私のCMSに埋め込んでいるJavaスクリプトを持っています。 CSSは外部からホストされているため変更できません。しかし、可能であれば、javascriptのdivclass内でイメージのサイズを変更する方法は不思議ですか？これはあなたが望むものである場合

画像が巨大であると私はサイズを変更したいと思いますので、幅が高さ

<div class="candid-embed" data-host="api.getcandid.com" data-id="c99469e1-5476-4aaa-90eb-b7d940882f0f" data-ids="172262754475694502" data-theme=""></div><script async defer src="//api.getcandid.com/scripts/embed.js"></script> 

CSS

element.style { 
border:0; 
border-radius:4px; 
box-shadow:rgba(0, 0, 0, 0.498039) 0 0 1px 0px, rgba(0, 0, 0, 0.14902) 0 1px 10px 0; 
height:1143px; 
margin:1px; 
max-width:658px; 
overflow:hidden; 
width:calc(100% - 2px); 

Answer 1

あなたが複数の画像のサイズを変更するために探している場合Array.prototypeとgetElementsByTagName()

例使用してみてください：私は（画像の大きさを決定するためにクラスを使用して上記の例では

Array.prototype.slice.call(document.getElementsByTagName("IMG")).forEach(function(e) { 
 
    if ((e.className).indexOf('img-lg') > -1) { 
 
    e.style.width = '300px'; 
 
    e.style.height = '300px'; 
 
    } else if ((e.className).indexOf('img-md') > -1) { 
 
    e.style.width = '200px'; 
 
    e.style.height = '200px'; 
 
    } else { 
 
    e.style.width = '100px'; 
 
    e.style.height = '100px'; 
 
    } 
 
});

<img class="img-sm" src="https://docs.google.com/uc?id=0B5iA7cDj2cjqdlRIWlJTRGJWb00"> 
 
<img class="img-md" src="https://docs.google.com/uc?id=0B5iA7cDj2cjqOTRwSUo0N1QzTEk"> 
 
<img class="img-lg" src="https://docs.google.com/uc?id=0B5iA7cDj2cjqcXMwTkpaOU5uNTg">

をimg-smがデフォルトサイズです）。

Answer 2

に対して比例していることを私は知りません、しかし、jsを使ってcssインラインを追加することができます。

document.getElementById("pic").style.width='330px';

<div> 
 
<img id="pic" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/IMG_Mauritius_Roundel.svg/2000px-IMG_Mauritius_Roundel.svg.png"> 
 
</div>

これは、CSSファイルへのアクセスをすることなく、330pxに画像幅のサイズを変更します。 サイズが画面に依存する場合は、たとえば次のように使用できます。 pvの代わりに30vw/vh。

jsを削除すると、元のサイズが表示されます。 しかし、それはインラインCSSなので、良い解決策ではありません。