Responsive Height with an Absolute Div Inside of a Relative Div - php

Question

I'm doing an about page. I've got each person's photo set to absolute inside of a relative positioned div. The absolute positioned div contains two photos layered on top of each other, and when you hover, the alternate photo of the person will appear. The relative positioned div also contains the name and email of the person.
It's also fluid. So I've got width of the relative div set to 100%, and the images are sizing fluidly with the browser. My problem is that the height stays the same, and I can't get it to respond with the browser. I've tried setting the height to 100%, but that's not the trick.
Any help is greatly appreciated!
Here's my 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')) { ?>
email
<?php } ?>
</div>
<?php //the_content(); ?>
</div>
</article>
<?php endwhile; ?>
<?php wp_reset_postdata(); // reset the query ?>
</section>
& my 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;
}

Answer 1

Have you tried max-height at all? Try max-height:100% and see if that works also please create a jsfiddle so we can help you faster