html - Flexbox - 等高图像列
问题描述
我有一个像这样的简单 flexbox 布局
html,body {
margin:0;
padding:0;
}
body {
height:100%;
width:100%;
}
.panel-grid
{
-webkit-align-items: flex-start;
align-items: flex-start;
margin-bottom:30px;
display:flex;
justify-content:space-between;
}
#section-163 {
width:calc(61.8034% - ( 0.38196600790794 * 30px ) );
align-self:auto;
}
#section-260
{
width:calc(38.1966% - ( 0.61803399209206 * 30px ) );
align-self:auto;
}
.myimage {
object-fit:cover;
width:100%;
height:100%;
}
<div class="panel-grid panel-no-style">
<div id="section-163" class="panel-grid-cell">
<div class="rty-panel widget widget_image-widget panel-first-child panel-last-child" style="height: 100%;">
<div class="rty-widget-image-widget rty-widget-image-widget-base" style="height: 100%;">
<img class="myimage" src="https://dummyimage.com/1600x900/000/fff">
</div>
</div>
</div>
<div id="section-260" class="panel-grid-cell">
<div class="rty-panel widget widget_image-widget panel-first-child panel-last-child" style="height: 100%;">
<div class="rty-widget-image-widget rty-widget-image-widget-base" style="height: 100%;">
<img class="myimage" src="https://dummyimage.com/500x600/000/fff">
</div>
</div>
</div>
</div>
我正在尝试使用 object-fit 来裁剪图像以匹配高度。
我哪里错了?
解决方案
尝试align-items: flex-start
从.panel-grid
. 它覆盖了stretch
默认值。
.panel-grid {
/* -webkit-align-items: flex-start; */
/* align-items: flex-start; */
margin-bottom: 30px;
display: flex;
justify-content: space-between;
}
html,
body {
margin: 0;
padding: 0;
}
body {
height: 100%;
width: 100%;
}
.panel-grid {
/* -webkit-align-items: flex-start; */
/* align-items: flex-start; */
margin-bottom: 30px;
display: flex;
justify-content: space-between;
}
#section-163 {
width: calc(61.8034% - ( 0.38196600790794 * 30px));
align-self: auto;
}
#section-260 {
width: calc(38.1966% - ( 0.61803399209206 * 30px));
align-self: auto;
}
.myimage {
object-fit: cover;
width: 100%;
height: 100%;
}
<div class="panel-grid panel-no-style">
<div id="section-163" class="panel-grid-cell">
<div class="rty-panel widget widget_image-widget panel-first-child panel-last-child" style="height: 100%;">
<div class="rty-widget-image-widget rty-widget-image-widget-base" style="height: 100%;">
<img class="myimage" src="https://dummyimage.com/1600x900/000/fff">
</div>
</div>
</div>
<div id="section-260" class="panel-grid-cell">
<div class="rty-panel widget widget_image-widget panel-first-child panel-last-child" style="height: 100%;">
<div class="rty-widget-image-widget rty-widget-image-widget-base" style="height: 100%;">
<img class="myimage" src="https://dummyimage.com/500x600/000/fff">
</div>
</div>
</div>
</div>
推荐阅读
- python - 意外的日期时间行为
- javascript - 为什么添加不等待超时承诺解决?
- java - Generate CSV file with some values quoted and others not
- r - R ggplot2:在尝试使用百分比时使用堆叠条形图时无法在 Y 轴上获得正确的标签
- julia - Julia - 在运行时创建的函数中获取运行时参数
- objective-c - 如何在Tableview的三列中放置文本
- mysql - 启用“使用 gRPC 进行文件共享”时,macOS 上的 Docker 2.4 无法正确挂载卷
- python - 错误:找不到满足要求 apturl==0.5.2 的版本(来自 -r /tmp/build_97769b8b/requirements.txt(第 2 行))
- javascript - 屏幕唤醒锁定在交互式画布上
- java - Observable 存储最后一个值,但不能推送新值?