使用 File API 将背景图像调整为 div 大小

Question

我现在有一个问题，

我正在为上传系统使用一组图像块，如下所示。

当我单击input type="file" 的每个方块时，我会使用File reader API 获得图像预览，所有这些都工作正常，我所做的是替换 div 的背景图像（其尺寸为 100px X 100px) 用于预览，使用

.css( "background", 'url(' + e.target.result + ')' )

但是图片不适应div的宽高，只显示一部分。

我尝试使用 css 映射设置 "background-size": "100%" 甚至 "background-size": "100px 100px"，但结果保持不变。

有什么想法吗？

提前致谢

Answer 1

您可以将background-size css 属性设置为contain，就像这样：

.css( "background-size", 'contain' )

更多信息请参见here。

注意：正如 Rory McCrossan 所说，将 background-size 设置为 cover 也可以，此时您不介意裁剪图像。