css 如何实现手机banner图片自动使用手机的高度和宽度呢?


摘要:
下文讲述使用css代码使用手机banner中的图片自动适应手机高度和宽度的方法说明,如下所示;

实现思路:  
     1.将图片所处的父容器定位为按百分数比例定义的一个对象
     2.将图片定义为百分之百的尺寸占据父容器

例:

  <div class="banner">
     <img src="***.png" alt="" />
 </div>
 
<style>
 .image-header{
    position: relative;
    width: 100%;
    height: 0;
    padding-top:100%;
    img{
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}
</style>