网格中的响应图像

问题描述 投票：0回答：1

我正在使用Bulma网格框架为我们的学习管理系统自定义界面的一部分。我在左侧有一个简单的垂直导航（在大屏幕上为1列），然后在中间有一个大型促销横幅（在大屏幕上为8列），在右侧有一个较小的促销横幅（在大屏幕上为3列） ）。我进行了设置，以便所有三个项目都显示在桌面大小的屏幕上，然后在稍小的断点处显示，以便仅进行导航和大型促销节目，然后在移动设备上进行显示，以便仅进行导航。

我遇到的问题是，我无法在右侧获得较小的促销横幅的高度，无法与主要促销的高度匹配。我尝试过调整图片占位符的尺寸，以使其不为正方形（就像现在一样），而且无论我做什么，它都比主要促销短或略高。当两者都在视野中时，我需要它们具有相同的高度。

最初我进行了设置，以使图像保持静态大小，并且在使用进行移位时被“裁剪”

object-fit:cover;

但是这不适用于IE11，不幸的是这是一个要求（并且也不理想，因为这些图像将成为促销横幅，并且部分内容会被截断）....所以这就是为什么我要尝试这种方式调整它们的大小。

这里是一个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的head标签中。

我对网格系统不是太熟悉，所以不确定是否要丢失一些东西以使其以匹配的高度显示，但仍会保持响应。

感谢！

html css responsive-design bulma responsive-images
1个回答
0
投票

如果可以选择将图像添加为背景，则可以使用以下CSS：

.column {
background-size:cover;
}

也将与IE11一起使用。

另一个会使图像宽高比失真的选项是为图像设置最小高度值：

.respImg {
    min-height: 300px;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.