Html 背景图像如何以简单的方式响应？

是否可以使背景图像响应，以便在以下代码中按比例从桌面缩放到移动设备

CSS：

div.backgroundimage {
  background-image: url('images/image.jpg');
}

<div class="backgroundimage"> </div>

HTML：

div.backgroundimage {
  background-image: url('images/image.jpg');
}

<div class="backgroundimage"> </div>

请注意，我已经阅读了所有张贴的类似问题，但没有答案。我的意思是，通过一些例子，可以缩放宽度，但所有回复都缺少如何缩放高度

---

谢谢大家!

不使用“背景图像”属性，您可以创建一个图像，它可以缩放到窗口的大小，并将其放在div后面：

#background-image {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

您可以使用以下样式：

background-size: cover;

这应该保持纵横比（比例比例），但也包括整个面积、宽度和高度。如果你想让它覆盖整个屏幕，那么你需要确保它有全宽和全高。把它放在中心也是个好主意

见a

---

这将自动按比例填充整个宽度和高度，但这意味着一些边缘可能会被切断。此外，如果图像比它应该填充的内容小，那么它看起来可能是像素化的（参见下面的注释）。

您应该查看CSS属性

background-size: 100%;
background-repeat: no-repeat;

background size

属性接受各种类型的值，其中一种是

背景大小：%width%height

如果只传递一个值，则另一个值设置为
auto

注意：-请记住，最好选择一个维度作为基线，然后将另一个维度设置为
auto
。因为如果您同时设置了这两个维度，那么在大多数情况下图像的纵横比都会向上倾斜。
我认为您需要JavaScript来实现这一点：

HTML:

JS（全宽）：

CSS（用于不同宽度）：

JS（适用于不同宽度）：

HTML:

CSS:

你是什么意思？使其与屏幕完美匹配？我的意思是根据屏幕大小重新调整图像大小的过程。请提供一个代码示例，或者一个效果应该是什么样的图像。我猜你会怎么想，是不是背景所在的框没有调整大小？你可以通过查看“padding ratio”黑客来调整它。很可能div也没有调整大小，问题只是措词不当。如果是这种情况，则必须包含更多信息，调整div的高度和宽度大小需要知道它是窗口的全宽/高还是某个父元素的全宽/高。@键入Style Sorry。我打错了。ew，W3学校。。。我认为你错了，但不是肯定的，我从来没有用过盖子。@KevinB是这样的：检查一下（原始图像是128x128）好了，好了，这个答案解决了问题。：）@凯文：是的。这就是“cover”的意思。我需要从CSS调用图像，而不是从HTML调用图像。这会拉伸图像而不保持其比例。您还可以设置底部和右侧，省略宽度和高度更新答案。@MohdAbdulMujib这会填满整个屏幕，但不会按比例缩放。不能再多说了！100%尺寸或将图像应用于身体怎么样？什么是100%尺寸？为什么是尸体？他用div.好吧，我明白你为什么这么做了。但是你可以通过拍打比率黑客提供div的比率。不需要JSI我不太了解这个技巧，我添加了不同于100%浏览器窗口宽度的代码。还不错。背景图像需要延伸到其父图像获得的空间：
var ratio = 960 / 634; // width/height of the image
$(window).resize(function () {
  var windowWidth = $(window).width();
  $('div').css('height', windowWidth / ratio)
});
$(window).trigger('resize');

div {
  background: url(https://pixabay.com/static/uploads/photo/2015/07/17/06/08/styggkaerret-848532_960_720.jpg) no-repeat;
  background-size: cover;
  max-width: 500px;
}

var ratio = 960 / 634; // width/height of the image
$(window).resize(function () {
  var windowWidth = $(window).width();
  $('div').css('height', $('div').width() / ratio)
});
$(window).trigger('resize');

.wrapper {
  padding-bottom: 66.04%; // height/width*100%
  max-width: 100%; // you can change it for example to 600px;
  height: 0;
  position: relative;
}
.bg {
  background: url(https://pixabay.com/static/uploads/photo/2015/07/17/06/08/styggkaerret-848532_960_720.jpg) no-repeat;
  background-size: cover;
  width: 100%;
  position: absolute;
}