网格中的响应式图像答案

【问题标题】：Responsive Images in Grid网格中的响应式图像
【发布时间】：2020-01-27 23:01:52
【问题描述】：

我正在使用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】：

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

.column {
background-size:cover;
}

它也适用于 IE11。

另一个会扭曲图像纵横比的选项是为图像设置一个最小高度值：

.respImg {
    min-height: 300px;
}

【讨论】：

虽然我确实可以选择将图像添加为背景，但我被要求尽量避免图像被裁剪，而是调整大小......问题是我需要保留图像纵横比以避免失真（图像将是带有文字的促销横幅等，因此它们需要清晰）。不过感谢您的建议！
如何在每个断点更改其中一张图像的最大高度？