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

U2FsdGVkX1x 發(fā)布于2019-08-01 18:33 / 687人閱讀

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

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

如果用JS畫(huà)應(yīng)該也是可以的，但一個(gè)簡(jiǎn)單的活動(dòng)頁(yè)沒(méi)必要，快速實(shí)現(xiàn)用背景圖調(diào)CSS最快。

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

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

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

以下實(shí)現(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%;
      }
    }

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

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

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

父元素將子元素包裹

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

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

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

padding的比例要符合一個(gè)計(jì)算規(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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/51813.html

相關(guān)文章

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

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

jcc 2019-08-30 13:56 評(píng)論0 收藏0
段友福利：Python爬取段友之家貼吧圖片和小視頻

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

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

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

wenzi 2019-08-28 18:28 評(píng)論0 收藏0
margin/padding百分比值的計(jì)算

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

jsummer 2019-08-29 16:37 評(píng)論0 收藏0
margin/padding百分比值的計(jì)算

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

Pikachu 2019-08-02 11:24 評(píng)論0 收藏0