控制背景图像的大小答案

【问题标题】：Controlling the size of a background image控制背景图像的大小
【发布时间】：2018-02-03 00:20:57
【问题描述】：

使用 JavaScript，元素被分配给 var a。如果我简单地将其样式背景分配给图像（大多数图像）：a.style = 'background:url(image.jpg)';，图像的宽度和长度将完美调整以适应 div 元素的默认值。

但有一个特殊问题：我用手机 (.jpg) 快速拍摄了一张照片，并将其下载到我的电脑上，并将其 url 值分配给 div 元素的背景。但是，它不会将其宽度和高度调整为 div 元素的宽度和高度。

这是为什么？我该如何解决这个问题？

提前致谢。

【问题讨论】：

没有足够的信息来了解可能会影响您的元素的因素。多个 CSS 规则可以应用于一个元素，并且这些 CSS 规则中的任何一个都可能导致您看到的症状。请注意，这实际上不是 JavaScript 问题，而是 HTML/CSS 问题。
Set size on background image with CSS?的可能重复
使用background-size:100% 100%

标签： html css

【解决方案1】：

要控制背景图片的大小，可以使用 background-size 属性。

为了确保图像保持在 div 的约束范围内，您可以使用“contain”

background-size: contain;

【讨论】：

当它适合 div 时，它会重复它的一部分
作为回应，我已将背景属性编辑为：a.style = background:url("image.jpg") no-repeat';，因此，所述重复部分现在是空白。