ブラウザーの幅を変更するとグリッド内の画像を垂直に伸ばす方法は？

Question

これは私が達成しようとしている例です

左と右の画像が常に同じ高さになり、中央のブロックの高さが左の画像の高さに等しくなるようにします。 さらに、ブラウザの幅を変更すると、画像が縦方向に大きくなります。

私は立ち往生しており、そのような結果をどのように達成するのか不明です。画像の代わりに私はdivの要素を背景に利用することができました。

具体的に私は、ブラウザの幅と高さに成長するために、内部ブロックの像高を作成する方法がわからない、と私は私が行うことができます私の現在の努力で

、このような結果を達成するためにJavaScriptを使用したくありませんすべての列が同じ高さになるようにします。ただし、ブラウザの幅を変更すると、列間にスペースが追加されます。

Answer 1

だから私は、なぜあなただ​​けの画面と（最大幅の@media使用していけないのdivブロックと背景画像と

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>