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

Question

我现在有一个问题，

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

当我点击input type="file"每个正方形时，我使用文件阅读器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' )

有关更多信息，请参见此处

注意：正如Rory McCrossan所说，将background-size cover也会起作用，那就是当你不介意裁剪图像时。