画像のサイズを変更するにはどうすればよいですか？javascriptでその比率を維持しますか？

Question

私は "ファイル"入力とイベント "onchange"によって呼び出される関数を持っています。それはサイズを変更してイメージを表示することですが、正確には私が必要なものではありません。

<input type="file" id="imgUp" accept=".jpg" onchange="readURL(this);" > 

<script type="text/javascript"> 
    function readURL(input) { 
     if (input.files && input.files[0]) { 
      var reader = new FileReader(); 

      reader.onload = function (e) { 
      $('#avatar,#image') 
       .attr('src', e.target.result) 
       .width(70) 
       .height(70); 
      }; 
      reader.readAsDataURL(input.files[0]); 
     } 
    } 
</script> 

jQueryを使用せずに、サイズを変更せずに画像を表示することはできますか？

ありがとうございます！

Answer 1

変更暗黙の高さはここで

は一例ですそして、max-高さおよび最大幅の幅宣言：最大高さと最大幅を使用して

.css('max-width', '70px').css('max-height', '70px');

は、それが使用する必要があるバウンディングボックスを設定して、画像は、それが本来のアスペクト比だ時にその内に収まるだろう。

ネイティブバニラJS：あなたは（私はそうするためにあなたを称賛）バニラJSに離れjQueryのから移動したいとしている場合

.style.maxWidth = '70px';

.style.maxHeight = '70px';

、this helpful websiteを試してみてください。あなたのコードのための

バニラ変換：

$('#avatar,#image') 
    .attr('src', e.target.result) 
    .width(70) 
    .height(70); 
}; 

は次のようになります。

var elements = document.querySelectorAll('#avatar,#image'); 
Array.prototype.forEach.call(elements, function(el, i){ 
    el.setAttribute('src', e.target.result); 
    el.style.maxWidth = '70px'; 
    el.style.maxHeight = '70px'; 
}); 

Answer 2

アスペクト比を維持するには、画像の幅と高さの両方を設定するのではなく、画像の幅または高さのみを設定します。

$('#avatar,#image').attr('src', e.target.result).width(70); 

それとも

$('#avatar,#image').attr('src', e.target.result).height(70); 

とバニラで

Javascriptを：：

var imgs = document.querySelectorAll("#image, #avatar"); 
for(var i = 0; i < imgs.length; i++){ 
    imgs[i].src = e.target.result; 
    imgs[i].width = 70;// or imgs[i].height = 70; 
} 

DEMO