网格中的响应图像
网格中的响应图像
提问于 2019-09-27 23:36:12
我正在使用Bulma网格框架为我们的学习管理系统定制部分界面。我在左边有一个简单的垂直导航(在较大的屏幕上有1列)，然后在中间有一个大的宣传横幅(在较大的屏幕上有8列宽)，右边有一个较小的宣传横幅(在较大的屏幕上有3列宽)。我对它进行了设置，以便在桌面大小的屏幕上显示所有三个项目，然后在稍小的断点上设置它，以便只显示导航和大型促销活动，然后在移动设备上设置它，以便只显示导航。
我遇到的问题是，我无法获得右侧较小的促销横幅的高度，以与主促销相匹配。我试着调整图片占位符的大小，让它不是方形的(就像现在一样)，不管我怎么做，它要么比主广告略短，要么比主宣传略高。我需要他们是相同的高度时，两者都在视野中。
最初，我对它进行了设置，以便图像保持静态大小，并在使用
object-fit:cover;但这并不适用IE11，不幸的是，这是一个要求(也不是很理想，因为这些图片将是宣传横幅和部分将被切断)....so，这就是为什么我试图解决这个问题，让他们适当地调整大小。
下面是一个JSFiddle，您可以理解我的意思：http://jsfiddle.net/markb088/zpfbc7y3/5/
下面是JSFiddle中的代码，以防它变得不可用：
html{
overflow-y: hidden !important;
}
body{
overflow-x: hidden;
background-color:#f3f3f3;
}
a.navLink{
position:absolute;
width:100%;
height:90%;
top:0px;
right:0px;
text-decoration:none;
z-index:10;
background-color:white;
opacity:0;
filter:alpha(opacity=0);
}
.menuContainer{
background-color: white;
border: 3px solid #d9d9d9;
/*height: 350px;*/
font-size: 0.8em;
font-weight: bold;
line-height:1.2;
}
@media only screen and (max-width:768px){
.columns{
margin-left: 0.5rem;
margin-right: 0.5rem;
}
}
.respImg{
/* height:350px;*/
width:100%;
/*object-fit: cover;*/
}
.imgHolder{
position:relative;
overflow:hidden;
}
.navItem1, .navItem2, .navItem3{
position:relative;
/* height:110px;*/
padding-top:10px;
}
@media only screen and (max-width:631px){
.regQuickNav{
display:none;
}
.menuContainer{
height: 125px;
}
}
@media only screen and (min-width:632px){
.mobileQuickNav{
display:none;
}
}<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" rel="stylesheet"/>
<body>
<div class="columns" style="margin-left: 2rem; margin-right: 2rem; margin-top: 6px;">
<div class="column is-1-fullhd is-1-widescreen is-1-desktop is-2-tablet is-12-mobile is-flex-desktop-only is-flex-tablet-only">
<div class="menuContainer">
<div class="mobileQuickNav">
<div class="columns is-mobile " style="margin: 0 0 0 0;">
<div class="column">
<div style="position: relative;"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/3COCw5x.png" alt="" width="100" height="70" />
<p style="text-align: center;">My Plan</p>
<a class="navLink" href="#">My Plan</a></div>
</div>
<div class="column">
<div style="position: relative;"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/YWTV4pn.png" alt="" width="100" height="70" />
<p style="text-align: center;">Browse Courses</p>
<a class="navLink" href="#">Browse Courses</a></div>
</div>
<div class="column">
<div style="position: relative;"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/L07pkyt.png" alt="" width="100" height="70" />
<p style="text-align: center;">Events Calendar</p>
<a class="navLink" href="#">Events Calendar</a></div>
</div>
</div>
</div>
<div class="regQuickNav">
<div class="columns" style="margin: 0 0 0 0;">
<div class="column is-full">
<div class="navItem1"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/3COCw5x.png" alt="" width="100" height="70" />
<p style="text-align: center;">My Plan</p>
<a class="navLink" href="#">My Plan</a></div>
<div class="navItem2"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/YWTV4pn.png" alt="" width="100" height="70" />
<p style="text-align: center;">Browse Courses</p>
<a class="navLink" href="#">Browse Courses</a></div>
<div class="navItem3"><img style="display: block; margin-left: auto; margin-right: auto;" src="https://i.imgur.com/L07pkyt.png" alt="" width="100" height="70" />
<p style="text-align: center;">Events Calendar</p>
<a class="navLink" href="#">Events Calendar</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="column is-8-fullhd column is-8-widescreen is-11-desktop is-10-tablet is-10-mobile is-hidden-mobile">
<div style="background-color: blue; overflow: hidden; position: relative;"><img class="respImg" src="https://i.imgur.com/GH2QEuJ.png" /></div>
</div>
<div class="column is-3-fullhd column is-3-widescreen is-hidden-tablet-only is-hidden-desktop-only is-hidden-mobile">
<div style="background-color: red; overflow: hidden; position: relative; border: solid 1px #999999;"><img class="respImg" src="https://i.imgur.com/jqbRA3S.png" /></div>
</div>
</div>
</body>
*请注意，您需要扩展结果面板和浏览器的宽度，以便显示较小的促销横幅。由于LMS的限制，大多数CSS被包括在html的头标签中。
我不太熟悉网格系统，所以我不确定我是否遗漏了一些东西，以使它显示出匹配的高度，但仍然具有响应性。
谢谢!
回答 1
Stack Overflow用户
发布于 2019-09-27 23:58:04
如果可以选择将图像添加为背景，则可以使用以下CSS：
.column {
background-size:cover;
}它也可以与IE11协同工作。
另一个会扭曲图像纵横比的选项是为图像设置一个最小高度值：
.respImg {
min-height: 300px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58137589
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号