使用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也会有效，那就是当你不介意裁剪图像时。