圖片框住一個小視頻談css padding百分比自適應

jcc 發布于2019-08-30 13:56 / 1959人閱讀

摘要：今天市場提出活動頁，活動頁有一塊內容是在一個手機背景圖框里播放視頻，網頁是適配的，設計師只給我一張帶有手機殼的背景圖。

今天市場提出活動頁，活動頁有一塊內容是在一個手機背景圖框里播放視頻，網頁是適配的，設計師只給我一張帶有手機殼的背景圖。

如果用JS畫應該也是可以的，但一個簡單的活動頁沒必要，快速實現用背景圖調CSS最快。

左側放在框里的視頻由兩層實現

一層為背景圖，一層為視頻，一開始剛好卡住，當屏幕寬度變化時要適配，最好不要媒體查詢適配大小

可以嘗試一波 css padding 百分比的魔法了

以下實現代碼：

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 當然也可以看著順眼調就好了

GPU云服務器云服務器 css圖片自適應 css自適應 asp 自適應css 圖片自適應

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115644.html

圖片框住一個小視頻談css padding百分比自適應

摘要：今天市場提出活動頁，活動頁有一塊內容是在一個手機背景圖框里播放視頻，網頁是適配的，設計師只給我一張帶有手機殼的背景圖。今天市場提出活動頁，活動頁有一塊內容是在一個手機背景圖框里播放視頻，網頁是適配的，設計師只給我一張帶有手機殼的背景圖。如果用JS畫應該也是可以的，但一個簡單的活動頁沒必要，快速實現用背景圖調CSS最快。 showImg(https://segmentfault.c...

U2FsdGVkX1x 2019-08-01 18:33 評論0 收藏0
段友福利：Python爬取段友之家貼吧圖片和小視頻

摘要：由于最新的視頻整頓風波，內涵段子被迫關閉，廣大段友無家可歸，但是最近發現了一個段友的，版本更新也挺快，正在號召廣大段友回家，如下圖，有興趣的可以下載看看我不是打廣告的，沒收廣告費的同時，之前同事也發了一個貼吧的段子聚居地，客官稍等，馬上奉上由于最新的視頻整頓風波，內涵段子APP被迫關閉，廣大段友無家可歸，但是最近發現了一個段友的app，版本更新也挺快，正在號召廣大段友回家，如下圖，有...

singerye 2019-07-30 16:45 評論0 收藏0
巧用margin/padding的百分比值實現高度自適應（多用于占位，避免閃爍）

摘要：那想要優化這一點，唯一的方法就是利用內容高度來撐開而非，這個方案跟消除浮動所用的方案非常相似給容器添加一個子元素偽元素，并把子元素偽元素的設為，使其實際高度相當于容器的寬度，如此一來，便能把容器的高度撐至與寬度一致了。一個基礎卻又容易混淆的css知識點本文依賴于一個基礎卻又容易混淆的css知識點：當margin/padding取形式為百分比的值時，無論是left/right，還是t...

wenzi 2019-08-28 18:28 評論0 收藏0
margin/padding百分比值的計算

摘要：還有一種說法是根本原因并不是因為死循環。，總而言之就是在默認的水平文檔流方向下，和屬性的垂直方向的百分比值都是相對于父元素寬度計算的。表示元素的高度為寬度的一半。 1、百分比介紹一般元素的寬度用百分比值表示時，元素的總寬度包括外邊距取決于父元素的width，這樣可能得到流式頁面，即元素的外邊距會擴大或縮小以適應父元素的實際大小。如果對這個文檔設置該樣式，使其子元素使用百分數外邊距，當...

jsummer 2019-08-29 16:37 評論0 收藏0
margin/padding百分比值的計算

摘要：還有一種說法是根本原因并不是因為死循環。，總而言之就是在默認的水平文檔流方向下，和屬性的垂直方向的百分比值都是相對于父元素寬度計算的。表示元素的高度為寬度的一半。 1、百分比介紹一般元素的寬度用百分比值表示時，元素的總寬度包括外邊距取決于父元素的width，這樣可能得到流式頁面，即元素的外邊距會擴大或縮小以適應父元素的實際大小。如果對這個文檔設置該樣式，使其子元素使用百分數外邊距，當...

Pikachu 2019-08-02 11:24 評論0 收藏0