[英]Responsive Height with an Absolute Div Inside of a Relative Div
我正在做一個關於頁面。 我已經將每個人的照片設置在相對定位的div的絕對內部。 絕對定位的div包含兩張彼此疊放的照片,當您將鼠標懸停時,將會顯示該人的替代照片。 相對定位的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;
}
您是否嘗試過max-height
? 嘗試max-height:100%
,看看是否也可以,請創建一個jsfiddle,以便我們更快地為您提供幫助
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.