横幅图片不会在移动设备上调整大小
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;
}
我正在使用 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;
}