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

Banner image doesn't resize on the mobile devices

我正在使用 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,
  ...

有人可以帮忙吗?谢谢。

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