横幅图片不会在移动设备上调整大小

Question

我正在使用 Inspinia 主题，但无法在移动设备上调整轮播图片的大小。页面示例为here. The stylesheet can be seen 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;
}

横幅图片不会在移动设备上调整大小

Banner image doesn't resize on the mobile devices

css

inspinia