图片框住一个小视频 谈css padding百分比自适应

今天市场提出活动页，活动页有一块内容是在一个手机背景图框里播放视频，网页是适配的，设计师只给我一张带有手机壳的背景图。

若是用JS画应该也是能够的，但一个简单的活动页不必，快速实现用背景图调CSS最快。

1. 左侧放在框里的视频由两层实现
2. 一层为背景图，一层为视频，一开始恰好卡住，当屏幕宽度变化时要适配，最好不要媒体查询适配大小

能够尝试一波 css padding 百分比的魔法了

如下实现代码：

<div class="desc-1 iphone-box hover">
       <img class="iphone" src="/assets/plsv/img-phone-3cf540ac5d957bf4662c51c149eb7f6ecffee82a2f629d38eebc6f00d2578b88.png" alt="Img phone">
       <div class="video-box">
        <video loop autoplay poster="" src="https://odum9helk.qnssl.com/lmJftwXMqXYw4wcLzZvwwT34llim"></video>
     </div>
 </div>

css :

.iphone-box {
    padding: 171% 0 0;
    position: relative;
    img.iphone {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .video-box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: 26.7% 0 0;
      video {
        width: 100%;
        height: 100%;
      }
    }

• 图片的父级元素 是没有宽高，设置padding占位，
• 父元素设置position:relative;
• 子元素设置 position:absolute;
• 父元素将子元素包裹
• 父元素padding设置为百分比
• 子元素的宽高随着父元素宽的变化 等比变化，不会出现cover形式的截图
• 由此叠在父元素里面的两层的相对位置就比较稳定
• padding的比例要符合一个计算规则(paddingbottom+paddingtop)/(paddingleft+paddingright)===img_height/img_width 固然也能够看着顺眼调就行了