在移动设备上没有响应的横幅图像
在移动设备上没有响应的横幅图像
提问于 2019-12-02 13:17:11
我有垂直侧菜单栏和折叠/打开选项。当我们关闭侧边栏时，滑块图像会调整大小，并相应地占据屏幕的全部宽度。它在桌面上运行得很好。
但是在移动设备上，没有显示完整的横幅图像。图像的某些部分被显示出来。我想调整图像的大小，并显示完整的图像，而不是它的一部分。
我尝试过使用width属性、background-size选项和值覆盖/包含。但不起作用。随着包含的价值，完整的图像可以在手机上看到，但然后有巨大的空白(约100 px)之上和下面的图像。
下面是html和css代码。
HTML代码:
<!-- Banner -->
<section class="main-banner">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="banner-content">
<div class="row">
<div class="col-md-12">
<div class="banner-caption">
<h4>Hello, this is your <em>Website</em> Theme.</h4>
<span>AWESOME HTML5 & CSS3 TEMPLATE</span>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<div class="primary-button">
<a href="#">Read More</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>CSS如下所示:
/* Banner */
.main-banner .container-fluid {
padding-left: 0px;
padding-right: 0px;
width:100%;
}
.main-banner .banner-content {
background-image: url(../images/main-banner.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position:center center;
}
.main-banner .banner-content .banner-caption {
max-width: 450px;
background-color: rgba(250,250,250,0.0);
margin: 50px;
padding: 50px;
}
.main-banner .banner-content .banner-caption h4 {
font-size: 38px;
font-weight: 700;
color: #31323a;
letter-spacing: 0.25px;
margin: 0px;
opacity:0;
}
.main-banner .banner-content .banner-caption em {
font-style: normal;
color: #DB214C;
opacity:0;
}
.main-banner .banner-content .banner-caption span {
font-size: 15px;
color: #aaaaaa;
letter-spacing: 0.5px;
display: inline-block;
margin-top: 20px;
margin-bottom: 20px;
opacity:0;
}
.main-banner .banner-content .banner-caption p {
margin-bottom: 30px;
opacity:0;
}我不需要横幅标题，所以可以移除.
非常感谢您的宝贵帮助。
A样本 JSFIDDLE
在这里，您可以通过调整预览窗格的大小来查看图像。
回答 1
Stack Overflow用户
发布于 2019-12-02 13:26:05
你试过了吗
@media(max-width:768px){
.main-banner .banner-content {
background-image: url(../images/main-banner.jpg);
background-repeat:no-repeat;
background-size:100% 100%;
background-position:center center;
}
}这可能是工作
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59139716
复制相关文章
相似问题
腾讯云开发者
