问题描述
在下面的示例 (fairtradetourism.org) 中,当视口(笔记本电脑上的窗口大小)仅变窄时,图像横幅不会缩小。当视口高度减小时,图像横幅才开始缩小(高度和宽度)。
结论是图片横幅在智能手机上占用了太多空间。
我应该更改什么 css 才能更有效地缩小图片横幅?
<header class="container-fluid sticky" id="headerSite">
<div class="container">
<nav class="navbar navbar-expand-md navbar-light">
...
</nav>
</div>
</header>
<section class="site-page">
<div class="container-fluid banner" style="background-image: url('banner.jpg');">
<div class="container h-100">
<div class="row h-100 align-items-end">
<div class="col-12 text-left">
<div class="row">
<div class="col-12">
<h1 class="title">
TEXT
</h1>
</div>
</div>
</div>
</div>
</div>
</div>
...
</section>
和CSS...
.site-page { z-index:10; padding-top:128px; padding-bottom:90px; }
#headerSite {
z-index:100;
background-color:white;
}
.sticky {
position:fixed;
top:0;
width:100%;
z-index:9;
}
.banner {
height: 50vh;
min-height: 200px;
max-height: 400px;
background-size: cover;
background-position: left;
background-repeat: no-repeat;
margin-bottom:16px;
}
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)