图片宽高比不变且自适应大小

前端页面布局中经常遇到图片自适应大小，且宽高比不变（即图片不发生压缩）的需求，这里提供一种思路，希望对大家有所帮助。

存在这样一种实现方案，也就是img元素的父元素设置宽度为100%，高度不做设置，然后img元素的宽高也都设置为100%，这样可以实现不同设备显示的图片都是完整图片且宽高比不发生改变，具体的代码如下(注意更改图片路径，这里的图片是我本地的图片)：

    
    
    



    

我是标题

表面看起来这种方法也实现了布局需求，但这是存在一定缺陷的，细心的朋友可能注意到我代码的底部加了一个“我是标题”的h2标签，大家可以测一下，当页面刷新的时候，这行字会发生跳动，特别影响用户体验，这样的话，最好不要使用这个方法，下边为大家提供一种更好的方法，代码如下：

    
    
    



    

我是标题

这种方式相当于让父元素充当了占位的作用，即使图片没有加载出来，但是位置也是被占据的，也就避免了文字的跳动，但是有几个需要注意的知识点，首先img的position值为absolution，那么其父元素的position一定要设置为relative，否则是子元素的定位不会相对于父元素，其次就是padding-bottom的值为百分比，此时是以的元素本身宽度为基数做计算的，而不是其复元素宽高为百分比基数。好了，希望对大家有所帮助。