圖片框住一個小視頻 談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 固然也能夠看着順眼調就行了