横幅图像不能在移动设备上调整大小

Question

我正在使用Inspinia主题，但我无法在移动设备上调整旋转木马图像的大小。该页面的示例是here。样式表可以在here中看到。

现在，对于页面，图像的指定方式如下：

.landing-page .header-back.one {
  background: url('../img/landing/header_one.jpg') 50% 0 no-repeat;
}
.landing-page .header-back.two {
  background: url('../img/landing/header_two.jpg') 50% 0 no-repeat;
}

然而，媒体部分似乎没有任何关于如何调整大小的内容：

@media (max-width: 767px) {
  .landing-page .carousel-caption,
  ...

有人能帮帮忙吗？谢谢。

Answer 1

默认的background-size值被设置为auto。如果要调整背景的大小，则必须更改属性值。我通常推荐的一个值是cover，它会让你的背景沿着元素的最短轴线自动覆盖，使其完美匹配，并去除隐藏的最长轴线溢出的背景。换句话说，cover属性调整了背景的大小，将其缩小到仍然覆盖其元素的最小大小。

然而，如果你不调整旋转木马的高度(因为高度是背景自适应的最短的轴)，它不会对你有任何好处。

在您的情况下，在您的媒体查询中，我宁愿将

.landing-page .carousel, .header-back {
    height: 350px
}

它可以是350px或您认为合适的任何值。

当然，背景应该设置如下：

.landing-page .header-back.one {
  background: url('../img/landing/header_one.jpg') no-repeat center / cover;
}
.landing-page .header-back.two {
  background: url('../img/landing/header_two.jpg') no-repeat center / cover;
}