Question

我有一个导航和section-top框88%高（没有px值）。如何使图像响应？当我在手机上查看网站时，图像是页面的一半，我希望它与页面一样高。

#views_slideshow_cycle_teaser_section_home_view-block .views-field-field-home-image img{
    width:100%;
    height:100%;
    margin-top:-50px;
}
#section-top{
    position:absolute;
    overflow:hidden;
    height:88%;
    width:100%;
}

HTML

<div id="section-top">
    <div id="featured">
        <?php print render($page['featured']);?>
    </div>
</div>

我使用height:88%的原因是因为当我设置px值时，它不会覆盖更大分辨率的页面。

Website

Answer 1

尝试使用 div 与背景图片代替 img ，或删除固定宽度和高度的img。

Answer 2

您可以将width:100;和height:100%应用于图片，但这样会破坏图片的宽高比。为了使图像在不破坏纵横比的情况下填充最大高度，您可以执行以下操作：

width:auto;
height:100%;
max-width:100%;
*zoom:1;

Answer 3

#views_slideshow_cycle_div_home_view-block_0{
width:100%
}

和

views_slideshow_cycle_div_home_view-block_2{
width:100%
}

响应式图像％

3 个答案: