javascript - 显示上传的图像，并将其缩放以适合图像字段而不失真

Question

我已经使用下面的脚本来显示上传的图像，而无需重新加载页面，并且效果很好。

除了缩放上传的图像以适合 390px x 390px 的 img 对象。

如果我可以将背景图片设置为上传的文件，css 将很好地缩放图片，但当前方法只是拉伸 src 图片以填充整个字段。

如何修改此函数以将其e.target.result应用于背景图像而不是 src？

//function to display selected image
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            //$('#optimageinput').attr('src', e.target.result);
        };
        reader.readAsDataURL(input.files[0]);
    }
}

Answer 1

您可以使用 jQuery 的.css()：

reader.onload = function (e) {
    $('#optimageinput').css('background-image', 'url(' + e.target.result + ')');
};