与响应式图像％

我有一个导航和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%工作的原因是因为当我设置一个像素值，那么它不会涵盖在更大分辨率的页面。

Website

来源

2014-12-13 Greg

您可以将width:100;和height:100%应用于图像，尽管这会破坏图像的宽高比。对于图像填补了最大高度不破坏纵横比，你可以做这样的事情：

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

来源

2014-12-13 13:52:48 Nojan

尝试使用DIV与背景图像代替IMG或删除一个固定的宽度和IMG的高度。

来源

2014-12-13 13:49:08 Mardzis

图像上传与CMS系统，所以不能设置它作为背景 – Greg 2014-12-13 13:50:52

''中的百分比而不是固定值？ – Mardzis 2014-12-13 13:54:16

#views_slideshow_cycle_div_home_view-block_0{ 
width:100% 
}

和

views_slideshow_cycle_div_home_view-block_2{ 
width:100% 
}

来源

2014-12-13 14:00:04 Joci93

与响应式图像％

回答

相关问题