CSS实现图片占位与高度自适应

转载：zhuanlan.zhihu.com/p/100862969

图片的占位和高度自适应是为了在不固定高度的前提下避免 图片未加载时容器塌陷 和 加载过程中高度变化引起的闪烁

举个栗子，兼容IE9以及IE9以上的所有浏览器，自测没问题

// html部分
<div class="h-logo-l">
          <div class="container placeholder">
            <img class="img" :src="`${imgPath}/custom/img/logo.png`" />
          </div>
        </div>
    
    //css部分
    .h-logo-l {
        width: 145px
        float: left /*需兼容IE浏览器，所以采用float布局 */
      }
      .container {
        position: relative
        overflow: hidden
      }
      .placeholder {
        content: ''
        display: block
        padding-bottom: 35% /*缩放比例*/
      }
      .img {
        position: absolute
        left: 0
        top: 0
        max-width: 145px /*限制最大宽度*/
        max-height: 50px /*限制最大高度*/
      }

做项目时，还是要多思考如何写代码，方法有多种，但要学会找到合适的方法，每天进步一点点，提高编码能力，加油吧，小菜鸟~~，end~~~