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

Question

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

CSS ：

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

HTML ：

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

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

谢谢！

Answer 1

您应该查看background-size CSS属性。

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

background-size属性接受各种类型的值，其中一个是

background-size: %width %height ;

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

注意： - 请记住，建议将一个维度确定为基线，并将另一个维度设置为auto。因为如果你设置了这两个尺寸，那么在大多数情况下，图像的纵横比将倾斜。

Answer 2

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

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

Answer 3

您可以使用样式：

background-size: cover;

这应保持纵横比（按比例缩放），但也要覆盖整个区域，宽度和高度。如果你想让它覆盖整个屏幕，那么你需要确保它具有完整的宽度和高度。将它集中在一起也可能是一个好主意。

查看JSFiddle。

这将按比例自动填充整个宽度和高度，但这意味着可能会在边缘上切掉一些。此外，如果图像小于它应该填充的内容，则可能看起来像素化（请参阅下面的评论）。

Answer 4

我认为你需要JavaScript：

HTML：

<div></div>

CSS（全宽）：

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

JS（全宽）：

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

CODEPEN (full width)

CSS（不同宽度）：

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;
}

JS（不同宽度）：

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');

CODEPEN (different width)

HTML：

CSS：

.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;
}

CODEPEN (padding hack - without JS)