使用javascript

Question

所以，我已经有了这个工作的javascript，它加载了一个用户上传到显示它的屏幕上的HTML的图像。

但是，它会显示没有最大高度或宽度的图像，因此它会将页面上的按钮移动到无法看到或按下的位置。如果上传的图片足够大，这包括提交按钮。

那么，是否有某种方法可以上传＆＃39;图像显示真的很小：像高度最大30px？

$(function(){
    $('#user_avatar').change(function(e){
        var files = event.target.files;
        var image = files[0];
        for (var i = files.length - 1; i >= 0; i--) {
            var reader = new FileReader();
            var file = files[i];
            reader.onload = function(file) {
              var img = new Image();
              img.src = file.target.result;
              $('#inputpic').attr('src', file.target.result);
            }
            reader.readAsDataURL(image);
        };
    });
});

我尝试过添加：

  theimage = getElementById('inputpic')
  theimage.style.height='10px';

但这没有效果。

编辑1

JS与之交谈的html.slim：

= image_tag('temp.png', id: "inputpic", class: 'tiny_image_display')

我做的SCSS：

.tiny-image-display {
  max-height: 30px;
}

Answer 1

您可以非常轻松地在CSS中设置它：

#inputpic {
  max-height: 30px;
}

Answer 2

/img/