圖片框住一個小視頻談css padding百分比自適應(yīng)

jcc 發(fā)布于2019-08-30 13:56 / 1971人閱讀

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

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

如果用JS畫應(yīng)該也是可以的，但一個簡單的活動頁沒必要，快速實現(xiàn)用背景圖調(diào)CSS最快。

左側(cè)放在框里的視頻由兩層實現(xiàn)

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

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

以下實現(xiàn)代碼：

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%;
      }
    }

圖片的父級元素是沒有寬高，設(shè)置padding占位，

父元素設(shè)置position:relative;

子元素設(shè)置 position:absolute;

父元素將子元素包裹

父元素padding設(shè)置為百分比

子元素的寬高隨著父元素寬的變化等比變化，不會出現(xiàn)cover形式的截圖

由此疊在父元素里面的兩層的相對位置就比較穩(wěn)定

padding的比例要符合一個計算規(guī)則(paddingbottom+paddingtop)/(paddingleft+paddingright)===img_height/img_width 當(dāng)然也可以看著順眼調(diào)就好了

GPU云服務(wù)器云服務(wù)器 css圖片自適應(yīng) css自適應(yīng) asp 自適應(yīng)css 圖片自適應(yīng)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115644.html

相關(guān)文章

圖片框住一個小視頻談css padding百分比自適應(yīng)

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

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

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

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

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

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

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

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

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

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