javascript - 上传图像并使用javascript将其显示为小

Question

所以，我得到了这个有效的 javascript，它加载了用户上传到显示它的屏幕上的 HTML 的图像。

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

那么，有没有办法让“上传”的图片显示得非常小:比如最大 30 像素的高度？

$(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;
}