javascript - 使用 html 输出标签时有没有办法控制图像的大小？

Question

我正在使用以下代码上传图像以供查看，然后再将其传递到我的服务器。我想使用 css 对图像的大小进行限制。 CSS 对图像没有影响，因为它是由输出呈现的。有没有解决的办法？我尝试将 CSS 属性添加到其周围的 div 中，但这也不起作用。

HTML:

  <input type="file" id="files" name="files[]" file-model="myFile"/>
  <output id="list" class="resize-image" alt="Image"></output>

CSS:

#list{
  max-width: 15px;
  max-height: 7px;
}

Javascript:

var handleFileSelect = function (evt) {//already set up for multiple files; not what i want to do.
            var files = evt.target.files; // FileList object

            // Loop through the FileList and render image files as thumbnails.
            for (var i = 0, f; f = files[i]; i++) {

                // Only process image files.
                if (!f.type.match('image.*')) {
                    continue;
                }

                var reader = new FileReader();

                // Closure to capture the file information.
                reader.onload = (function(theFile) {
                    return function(e) {
                        // Render thumbnail.
                        var span = document.createElement('span');
                        span.innerHTML = ['<img class="thumb" src="', e.target.result,
                            '" title="', escape(theFile.name), '"/>'].join('');
                        document.getElementById('list').insertBefore(span, null);
                    };
                })(f);

                // Read in the image file as a data URL.
                reader.readAsDataURL(f);
            }
        }

        document.getElementById('files').addEventListener('change', handleFileSelect, false);

Answer 1

最简单的方法是使用 height 和 width img 标签属性。

var span = document.createElement('span');
        span.innerHTML = ['<img height="7" width="15" class="thumb" src="', e.target.result,
        '" title="', escape(theFile.name), '"/>'].join('');
        document.getElementById('list').insertBefore(span, null);

如果您真的想使用 .css 来完成此任务，您可以使用 background-size，但是必须设置 background 属性带有 css 中图像的 url。

您也可以像这样简单地覆盖 css 中的 img 标签:

img{
  max-width: 100px;
  max-height: 100px;
}

在这里您可以测试这两种方法:http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background-size