最近几日接手了一个外包项目,碰到了几处坑,记录一下;

 

  如图是一个最简单的css页面的一部分

 

  要实现这种一侧文字一侧图片的效果,还得随屏幕大小尺寸变化。这里用了一下几点知识:
  

 

  这里图片是可以实现宽高等比例缩放的,但是div不会,这里有两种解决思路:

  1 文字部分放一个合适比例的图片作为背景图,文字绝对定位在背景图上

  2 div高随宽等比例缩放

  

  这里的 height:25.3vw;就是让高度按照 视图 宽度的25.3%进行缩放   对应的还有 vh,按照视图高度的对应百分比缩放
  下面是兼容性:  (参考地址:http://www.css88.com/book/css/values/length/vw.htm)
    

笔者(就是我)在后期的时候总发现图片和div之间总有间隙,像下面这样:

但是我的div和img的padding和margin都设为0,后来查了一下,解决方法还是很多的:

    1.将img设置为block;

    这个基本可以解决img和div下方的缝隙问题。

    2.设置img的竖直对齐方式

     v-align:bottom;

    3.设置父div的font-size:0

    4.设置外层的div的line-height:0

 

这里推荐使用第一种方法