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

2019年9月8日 169次阅读 来源: _ipo

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

如果用JS画应该也是可以的，但一个简单的活动页没必要，快速实现用背景图调CSS最快。

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

  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 当然也可以看着顺眼调就好了
    原文作者：_ipo
    原文地址: https://segmentfault.com/a/1190000013198551
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞