Question

我正在使用Bootstrap jumbotron来显示列表结果。这个jumbotron使用图像作为背景，设置为覆盖宽度的50％和最初的100％高度。请在下面找到在jumbotron的HTML div中实现的样式代码：

style="width:80%;max-width:750px;min-height:220px;
background:url({{ property.properties_pictures.property_image1.url }});
background-size:50% 100%;background-repeat:no-repeat;
list-style-type:none;border:solid;border-width:1px;border-color:#d6d0ca;"

对于屏幕宽度小于500像素的设备，我想将背景图像的覆盖范围反转为100％的宽度和50％的高度。

我尝试使用媒体查询但没有运气：

@media (max-width: @screen-sm-min)
{
.jumbotron
{
    background-size: 100% 50%;;
}
}

如果有人可以提供帮助，那就太好了。

感谢。

Answer 1

您应该以这种格式使用媒体查询 -

@media only screen and (max-width:500px){
.jumbotron
{
    background-size: 100% 50%;;
}
}

希望这有帮助！

Bootstrap - 根据设备屏幕大小调整超大屏幕图像背景覆盖范围

1 个答案: