Html 如何使网格中的图像在更改浏览器宽度时垂直增长？

以下是我试图实现的示例

我希望左右图像始终保持相同的高度，中间块的高度应该等于左图像的高度。 当我改变浏览器宽度时，我更需要图像垂直增长

我被困住了，不知道怎样才能达到这样的结果。我可以利用

div

元素和背景来代替图像

具体来说，我不知道如何使内部块的图像高度随浏览器宽度的增加而增加，我不想使用JavaScript来实现这样的结果

在我目前的努力中，我可以使所有列的高度相同，但是，当我更改浏览器宽度时，在列之间添加了更多的空间

---

所以我能够用div块和背景图像获得有意义的结果

const drDefaultStyles={
容器：{
},
标题：{
borderBottom:'实心1px#dddddd'，
颜色：'#8989'，
textAlign:“左”，
marginBottom:'20px'，
},
标题：{
fontSize:'14px'，
fontStyle:'斜体'，
fontFamily：“普拉蒂诺”，
textTransform:'大写'，
保证金：0，
体重：100，
},
高：{
高度：'250px'，
},
半高：{
高度：'120px'，
},
图像容器：{
位置：'相对'，
宽度：“100%”，
高度：“100%”，
背景：“rgb（245245245245）”，
填充：“10px”，
},
图片：{
宽度：“100%”，
高度：“100%”，
背景尺寸：'封面'，
背景位置：'中锋'，
背景重复：“不重复”，
},
标题：{
位置：'绝对'，
显示：“内联块”，
底部：“25px”，
背景：“rgba（24524524524585）”，
textTransform:'大写'，
填充：“7px 15px”，
},
}
目的地比赛
利德维尔
旧金山
迈阿密
芝加哥
纽约市

为什么不使用@media-only屏幕和（最大宽度：500px）cssproperty@rishit_s这将不起作用，事实上，我只针对平板电脑，台式机和超宽台式机到一定程度。我需要通过在更大的屏幕上放大图像来避免列之间的间距

const drDefaultStyles = {
  container: {

  },

  header: {
    borderBottom: 'solid 1px #dddddd',
    color: '#898989',
    textAlign:'left',
    marginBottom: '20px',
  },

  header_title: {
    fontSize: '14px',
    fontStyle: 'italic',
    fontFamily: 'Platino',
    textTransform: 'capitalize',
    margin: 0,
    fontWeight: 100,
  },

  tall: {
    height: '250px',
  },

  half_tall: {
    height: '120px',
  },

  image_container: {
    position: 'relative',
    width: '100%',
    height: '100%',
    background: 'rgb(245, 245, 245)',
    padding: '10px',
  },

  image: {
    width: '100%',
    height: '100%',
    backgroundSize: 'cover',
    backgroundPosition: 'center center',
    backgroundRepeat: 'no-repeat',
  },

  title: {
    position: 'absolute',
    display: 'inline-block',
    bottom: '25px',
    background: 'rgba(245, 245, 245, .85)',
    textTransform: 'uppercase',
    padding: '7px 15px',
  },
}


<section className="container" style={ _s.container }>
      <div className="row" style={ _s.header }>
        <h2 style={ _s.header_title }>Destination races</h2>
      </div>

      <div className="row" style={ _s.container }>
        <div className="col-lg-4 col-md-4 col-sm-4 col-xs-4" style={{ ..._s.tall, paddingLeft: 0, paddingRight: '5px' }}>
          <div style={ _s.image_container }>
            <div style={{ ..._s.image, backgroundImage: 'url(/images/cities/leadville.jpg)' }}></div>
            <span style={ _s.title }>Leadville</span>
          </div>
        </div>

        <div className="col-lg-4 col-md-4 col-sm-4 col-xs-4" style={{ padding: 0 }}>
          <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12" style={{ ..._s.half_tall, marginBottom: '10px', padding: 0 }}>
            <div style={ _s.image_container }>
              <div style={{ ..._s.image, backgroundImage: 'url(/images/cities/san-francisco.jpg)' }}></div>
              <span style={ _s.title }>San Francisco</span>
            </div>
          </div>

          <div className="col-lg-5 col-md-5 col-sm-5 col-xs-5" style={{ ..._s.half_tall, float: 'left', padding: 0, paddingRight: '5px' }}>
            <div style={ _s.image_container }>
              <div style={{ ..._s.image, backgroundImage: 'url(/images/cities/miami.jpg)' }}></div>
              <span style={ _s.title }>Miami</span>
            </div>
          </div>

          <div className="col-lg-7 col-md-7 col-md-7 col-xs-7"  style={{ ..._s.half_tall, float: 'left', padding: 0 }}>
            <div style={ _s.image_container }>
              <div style={{ ..._s.image, backgroundImage: 'url(/images/cities/chicago.jpg)' }}></div>
              <span style={ _s.title }>Chicago</span>
            </div>
          </div>
        </div>

        <div className="col-lg-4 col-md-4 col-sm-4 col-xs-4" style={{ ..._s.tall, paddingLeft: '5px', paddingRight: 0 }}>
          <div style={ _s.image_container }>
            <div style={{ ..._s.image, backgroundImage: 'url(/images/cities/new-york.jpg)' }}></div>
            <span style={ _s.title }>New York City</span>
          </div>
        </div>
      </div>

</section>