html5設(shè)置圖片自適應(yīng)屏幕寬度

使用百分比，比如

成都網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)建站！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)公司、微信開發(fā)、微信小程序、集團(tuán)成都定制網(wǎng)頁設(shè)計等服務(wù)項目。核心團(tuán)隊均擁有互聯(lián)網(wǎng)行業(yè)多年經(jīng)驗，服務(wù)眾多知名企業(yè)客戶；涵蓋的客戶類型包括：成都銅雕雕塑等眾多領(lǐng)域，積累了大量豐富的經(jīng)驗，同時也獲得了客戶的一致稱譽！

img

src='../a.ipg'

style='width:50%'

/

這樣就會保持屏幕的50%的寬度。

如果有上級標(biāo)簽，比如：

div

img

src='../a.ipg'

style='width:50%'

/

/div

那圖片大小就是div寬度的50%，div沒有設(shè)置寬度就會默認(rèn)是屏幕寬度，如果設(shè)置了寬度，就要注意

HTML5的視頻能不能拉伸寬度，實現(xiàn)自適應(yīng)寬度？

曾幾何時，項目中有碰到視頻比例拉伸的需求，但是發(fā)現(xiàn)這個看似再普通不過的一個需求，找遍全網(wǎng)至今都沒有找到解決方法。因為強制給video標(biāo)簽設(shè)置width和height的話只會將video的顯示區(qū)域拉伸，但是里面的視頻還是保持原始比例，怎么調(diào)都沒用：

因為當(dāng)我橫向拉伸時：

當(dāng)我縱向拉伸時：

2016-09-21 11:15:40 更新：

感謝 @RileyRen 提醒，原來還有object-fit這一屬性，把它設(shè)置為fill就滿足需求了，淚奔~，這篇文章就當(dāng)看個笑話吧，哎，不過可以看看我家喵星人的處女秀。

stylevideo {

object-fit:fill;

width:800px;

height:320px;}/styleh1測試視頻比例拉伸：/h1video src="" controls autoplay loop/video

但是，這一屬性兼容性不太好，IE全軍覆沒，安卓要4.4.3以上才支持：

所以我這個方法還是有一點點價值的，哈哈。

解決方法一

有人會說，既然網(wǎng)頁上拉伸不了比例，那么直接把視頻用轉(zhuǎn)碼工具拉伸比例然后重新轉(zhuǎn)碼不就是了？

沒錯，這就是我說的第一種解決方法，但是這對于少量視頻沒啥問題，如果有很多個視頻，全部轉(zhuǎn)碼又重新上傳也不太現(xiàn)實。剛開始我也確實是這么做的，但是后來發(fā)現(xiàn)還有其它方法。

解決方法二

就是標(biāo)題說的，借用transform來實現(xiàn)視頻比例拉伸。分2種情況，寬高比變大和寬高比變小。

3.1.?完整DEMO演示

先來看個完整的DEMO，視頻主角是我家的喵星人，阿喵說：哎呀，要露臉了，好害羞~~~

3.2.?寬高比變大

保持寬度不變，調(diào)整rotateX即可實現(xiàn)高度變小，也就是寬高比變大了。看下圖：

舉個例子，假如原始視頻分辨率是640*320（16:9），我想把它調(diào)成16:7，也就是640*280，那么：

cos θ = 新高度 / 舊高度 = 280 / 360

用js計算角度（單位是deg）：

var rotate = (Math.acos(280/360)*180/Math.PI).toFixed(2); // 新高度 / 舊高度

3.3.?寬高比變小

寬高比減小時，以高度為基準(zhǔn)，調(diào)整rotateY即可實現(xiàn)寬度變小，也就是寬高比變小了。

舉個例子，假如原始視頻分辨率是640*320（16:9），我想把它調(diào)成4:3，也就是480*320，那么：

cos θ = 新寬度 / 舊寬度 = 480 / 640

用js計算角度（單位是deg）：

var rotate = (Math.acos(480/640)*180/Math.PI).toFixed(2); // 新寬度 / 舊寬度

總結(jié)

綜上，有了這2個方法就可以實現(xiàn)任意比例的視頻拉伸了，不過變形過程中需要注意位置可能發(fā)現(xiàn)的變化。

附

附上前面演示選擇的DEMO：

!DOCTYPE htmlhtml lang="zh"head

meta charset="utf-8"

meta name="viewport" content="width=device-width, initial-scale=1.0"

title旋轉(zhuǎn)比例模擬/title

style type="text/css".content {

position: absolute;

width: 400px;

height: 300px;

-webkit-perspective: 400px;

perspective: 400px;

left: 100px;

top: 100px;}.wrapper {

position: absolute;

width: 320px;

height: 240px;

transform: rotateY(-30deg) rotateX(0deg);

border: solid 2px #000;}.wrapper.rotate{

transform: rotateY(-30deg) rotateX(50deg);}.wrapper:after {

content: '';

display: block;

position: absolute;

做好的html怎樣轉(zhuǎn)成html5自適應(yīng)屏幕大小？

首先你要在html頁面頭部加上下面的代碼;viewport"，不懂可以百度;content="，一些小的模塊可以用固定尺寸;meta , name="。再就是css中要應(yīng)用到媒體查詢，不能不用固定尺寸。

/，其次你要把頁面中的寬度修改為百分比;width=device-width; ，也就是@media;initial-scale=1"。

超文本標(biāo)記語言，標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用。“超文本”就是指頁面內(nèi)可以包含圖片、鏈接，甚至音樂、程序等非文字元素。

特點：

1、簡易性：超級文本標(biāo)記語言版本升級采用超集方式，從而更加靈活方便。

2、可擴(kuò)展性：超級文本標(biāo)記語言的廣泛應(yīng)用帶來了加強功能，增加標(biāo)識符等要求，超級文本標(biāo)記語言采取子類元素的方式，為系統(tǒng)擴(kuò)展帶來保證。

3、平臺無關(guān)性：雖然個人計算機大行其道，但使用MAC等其他機器的大有人在，超級文本標(biāo)記語言可以使用在廣泛的平臺上，這也是萬維網(wǎng)（WWW）盛行的另一個原因。

4、通用性：另外，HTML是網(wǎng)絡(luò)的通用語言,一種簡單、通用的全置標(biāo)記語言。它允許網(wǎng)頁制作人建立文本與圖片相結(jié)合的復(fù)雜頁面，這些頁面可以被網(wǎng)上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器。

HTML5如何利用rem實現(xiàn)自適應(yīng)布局

分析設(shè)計圖

假設(shè)設(shè)計圖大小為1080px。這也就意味著，在開發(fā)時，需要兼容的最大分辨率為1080px，最小的為320px。

2.?調(diào)整視口

代碼實例：

!DOCTYPE?html

head

meta?charset="UTF-8"?/

title布局之路-移動端開發(fā)實例/title

meta?name="viewport"?content="width=device-width,user-scalable?=?no"?/

link?rel="stylesheet"?type="text/css"?href="css/reset.css"?/

/head

body

div?class="wrap"/div

/body

/html

代碼解析：由于使用不同設(shè)備打開網(wǎng)頁時，寬度均有所不同，所以不能講視口設(shè)置為固定值，應(yīng)當(dāng)為width=device-width,即將視口設(shè)置為當(dāng)前設(shè)備的寬度。

3. 確定設(shè)計圖的最小字體

瀏覽器（部分）能夠顯示的最小字體未12px，當(dāng)移動端頁面寬度為320px時，要保證最小字體為12px，那么在1080px的設(shè)計圖中，最小字體應(yīng)當(dāng)為42px。

代碼實例：

style?type="text/css"

html?{

font-size:?42px;

}

/style

4. 按照設(shè)計圖的像素進(jìn)行開發(fā)

按照正常網(wǎng)頁開發(fā)流程，進(jìn)行網(wǎng)頁開發(fā)即可。

5. 使用百分比和rem替換px

代碼效果對比：

/*使用固定像素*/

.box?{

float:?left;

width:?658px;

font-size:?72px;

text-align:?center;

line-height:?195px;

}

/*使用百分比和rem*/

.box?{

float:?left;

width:?60.93%;

font-size:?1.71rem;

text-align:?center;

line-height:?4.64rem;

}

代碼解析：

水平方向的值，將具體像素調(diào)整為百分比。百分比的計算是根據(jù)父級的內(nèi)容區(qū)寬度進(jìn)行計算的。

例如，父級寬度為1080px， 子級元素為197px，那么子元素轉(zhuǎn)換為百分比為：197/1080*100%=18.24%。需要注意的是百分比根據(jù)父級計算，當(dāng)標(biāo)簽結(jié)構(gòu)級別不同時，計算公式中的“分母”也有所不同，在開發(fā)時這個地方很容易出現(xiàn)問題，請務(wù)必注意。

垂直方向的值，將具體像素調(diào)整為rem，與水平方向相比，垂直方向的計算就比較簡單。例如，行高為195px，HTML標(biāo)簽當(dāng)前的字體大小為42px，將行高轉(zhuǎn)換為rem單位，即195/42= 4. 64rem。

網(wǎng)頁標(biāo)題：html5寬度自適應(yīng)的簡單介紹
網(wǎng)頁路徑：http://chinadenli.net/article46/dsgdgeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計公司、靜態(tài)網(wǎng)站、動態(tài)網(wǎng)站、域名注冊、App設(shè)計、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)