Flexbox-等高图像列 [英] Flexbox - Equal height image columns

问题描述

我有一个简单的flexbox布局

I have a simple flexbox layout like this

   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>  

我正在尝试使用对象拟合来获取图像

I am trying to use object-fit to get the images to crop so that the height is matched.

我要去哪里了？

推荐答案

尝试从 .panel-grid 中删除​​ align-items：flex-start 。它覆盖了 stretch 默认值。

Try removing align-items: flex-start from .panel-grid. It's overriding the stretch default.

 .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>

这篇关于Flexbox-等高图像列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！