img自适应屏幕大小

今天在开发的过程中，遇到了一个需要图片自适应浏览器窗口的的需求，我百度后尝试，还是没有很好的解决，肯定是对这个部分理解不到位，后请教公司的大佬，学到了以下的解决办法，如果还有更好的方法，欢迎留言补充，共同进步！

一、html的布局

<div class="wrap">
   <div class="img-wrap">
      <div class="img-wrap-style1">
        <img src="Img.png" />
      </div>
      <div class="img-wrap-style2">
        <img src="Img.png" />
      </div>
    </div>
    <div class="img-wrap">
      <div class="img-wrap-style3">
        <img src="Img.png" />
      </div>
      <div class="img-wrap-style4">
        <img src="Img.png" />
      </div>
    </div>
</div>

这种布局是因为需要在页面水平垂直居中4张图片，两两为一组

二、css代码（以第一张图片为例，其余同上，可能需要调整float的方向，左边图片left，右边图片right）

.wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding-bottom: 150px;
}
.img-wrap {
    margin: auto;
}
.img-wrap-style1 {
    width: 35%;  /* 应该是根据图片本身大小设置存放图片的div宽度百分比*/
    height: auto;
    display:block;
    float: left;
    margin-top: 90px;
    padding-left: 10%;  /* 设置为百分比后，可以更好的自适应*/
    cursor: pointer;
    img {
      width: 100%;   /* 只需要设置宽度，不用高度*/
      height: auto;
    }
}

可以完美的兼容ie7

三、清除图片的浮动

在开发的过程中，由于图片是用float进行排版，导致页面的body没有撑起，页面底部的部分直接顶上去，导致页面无法向下滑动，故需要清除一下浮动

1. 在父标签结束处增加

<div style="clear: both;"></div>

2. 父级div标签定义伪类“:after”和zoom属性

.clearfix:after {
  display: block;
  clear: both;
  content: '';
  height: 0;
  visibility: hidden;
}
.clearfix {
  zoom: 1;
}

<div class="clearfix">
  <span>aaa</span>
  <span>bbb</span>
</div>

3. 父级div定义 overflow:hidden

.clearfix {
  overflow: hidden;
}

4. 给父级元素单独定义高度

.clearfix {
  height: 400px;
}

注：如需转载，请标明作者和出处，谢谢！