php - 相対 Div の内側に絶対 Div がある高さのレスポンシブ

Question

Aboutページをやっています。各人の写真を相対位置の div 内で絶対に設定しました。絶対位置の div には 2 枚の写真が重ねられており、カーソルを合わせると、人物の別の写真が表示されます。相対位置の div には、その人の名前と電子メールも含まれます。

それは流動的でもあります。そのため、相対 div の幅を 100% に設定しており、画像はブラウザーで流動的にサイズ変更されています。私の問題は、高さが同じままで、ブラウザーで応答できないことです。高さを 100% に設定しようとしましたが、それはトリックではありません。

どんな助けでも大歓迎です！

これが私のhtmlです：

<section class="team clearfix">
<?php
$custom_query = new WP_Query( array( 'post_type' => 'team', 'orderby' => 'title', 'order'         => 'ASC' ));
while($custom_query->have_posts()) : $custom_query->the_post(); ?>
<article <?php post_class(); ?> id="post-<?php the_ID(); ?>">
  <div class="inner">
    <div class="image-container">
     <?php
        $image2 = get_field('alt_photo');
          if( $image2 ): ?>
          <img class="bottom" src="<?php echo $image2['url']; ?>" alt="<?php echo  $image2['alt']; ?>" title="<?php echo $image2['alt']; ?>">

      <?php endif; ?>

      <?php
      $image = get_field('main_photo');
        if( $image ): ?>
          <img class="top" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" title="<?php echo $image['alt']; ?>">

      <?php endif; ?>
      </div>

      <div class="entry-summary">
        <h2 class="entry-title"><?php the_title(); ?></h2>
      <?php
      if(get_field('email')) { ?>
        <a href="mailto:<?php echo get_field('email'); ?>">email</a>
      <?php } ?>
    </div>
    <?php //the_content(); ?>

  </div>
  </article>
  <?php endwhile; ?>

 <?php wp_reset_postdata(); // reset the query ?>
 </section>

＆私のCSS：

section.team .image-container {
position: relative;
margin: 0 auto;
width: 100%;
height: 512px;
}

section.team .image-container img{
position: absolute;
left:0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
}

section.team .image-container img.top:hover{
opacity:0;
}

section.team {
padding: 30px 0;
text-align: center;
padding-left: 10px;
padding-right: 10px;
}

section.team .hentry {
float: left;
position: relative;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 20px;
}

section.team .hentry .entry-summary {
min-height: 50px;
}

section.team .hentry .entry-summary .entry-title {
font-family:'Avenir LT W02 95 Black', "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
font-size: .75em; /* 12px */
line-height: 1em; /* 14px */
letter-spacing: .2em;
margin-bottom: 0;
text-transform: uppercase;
}

section.team a {
font-size: 12px;
}