近經(jīng)手一個web項目,需要考慮前端多種尺寸屏幕的圖片適配問題,也是關(guān)于ui設(shè)計導(dǎo)出1X&2X切圖如何使用的方法,現(xiàn)在整理一下高dpi屏幕的web端適配方案,希望對大家能有幫助。
面向高dpi顯示屏的適配方案主要有以下幾種:
1、javascript選擇圖片進(jìn)行加載
方法:通過 window.devicePixelRatio 獲取設(shè)備像素比率,獲取屏幕寬度和高度,甚至可能通過navigator.connection或發(fā)出假請求,如foresight.js庫做一些網(wǎng)絡(luò)連接嗅探。收集所有這些信息后再決定要加載哪個圖片。
優(yōu)點:兼容低版本瀏覽器
缺點:圖像加載會有延遲
2、用服務(wù)端選擇加載圖片
方法:為每個圖片編寫自定義請求處理程序來處理。這樣的處理程序?qū)⒒赨ser-Agent(中繼到服務(wù)器的唯一信息)檢查Retina支持。然后,根據(jù)服務(wù)器端邏輯決定是否要提供高DPI圖片來加載適當(dāng)?shù)馁Y產(chǎn)(根據(jù)一些已知的慣例命名)。
優(yōu)點:兼容低版本瀏覽器
缺點:用戶代理不一定提供足夠的信息來決定設(shè)備是否應(yīng)該接收高質(zhì)量或低質(zhì)量的圖像。此外,與User-Agent相關(guān)的任何內(nèi)容都可能成為被攻擊的漏洞,應(yīng)該盡量避免使用。
3、通過CSS媒體查詢
方法:
#image { background: (low.png); } @media only screen and (min-device-pixel-ratio: 1.5) { #image { background: (high.png); } }
優(yōu)點:兼容比較廣泛,ie9以上瀏覽器基本都支持;可以靈活地選擇響應(yīng)斷點(例如,可以加載低,中和高DPI的圖片)。
缺點:代碼量比較大,此方法僅限于CSS屬性,所有的圖片必須都是背景元素。
4、使用最新的瀏覽器特性
方法:
css的image-set屬性
background-image: url(icon1x.jpg); background-image: -webkit-image-set( url(icon1x.jpg) 1x, url(icon2x.jpg) 2x ); background-image: image-set( url(icon1x.jpg) 1x, url(icon2x.jpg) 2x );
html的srcset屬性
<img alt="" src="banner.jpg" srcset="banner-HD.jpeg 2x, banner-phone.jpg 640w, banner-phone-HD.jpg 640w 2x">
優(yōu)點:代碼清晰,代碼量較少,適配比較簡單
缺點:稍微低版本的瀏覽器都不兼容,不過沒關(guān)系,至少可以顯示默認(rèn)尺寸的圖片
5、個人感覺的最優(yōu)方案
所有的圖標(biāo)盡量用svg和css來實現(xiàn),而高品質(zhì)圖片可以結(jié)合方案4的瀏覽器新特性來適配。
個人整理,如有錯誤或更好方法,歡迎分享,謝謝!
響應(yīng)式設(shè)計(RWD)中,令大家最頭痛的問題的是圖片的自適應(yīng)處理問題。往往我采取的處理方式是給圖片的容器設(shè)置一個尺寸,然后給圖片設(shè)置下面的代碼:
img {
max-width: 100%;
height: auto;
}
但往往需要處理的不止于此。你可能想要讓圖像長寬比例來填充他的整個容器,想重新定位他的中心位置。或者,如果你想按長寬比例響應(yīng)式調(diào)整iframe,你可能會真正地碰到麻煩。當(dāng)然也有修復(fù)的方法,但所有人都在說:
媒體調(diào)整的行為將會失控!
是的,現(xiàn)在我們要解決這個問題。CSS標(biāo)準(zhǔn)提出屬性object-fit和object-position可以解決這樣的問題。
Chris Mills在2011年發(fā)表了一篇The CSS3 object-fit and object-position properties,文章中詳細(xì)介紹了object-fit和object-position屬性的使用。今天我們也將深入學(xué)習(xí)和了解這兩個屬性的具體使用。
在CSS中,替換元素(replaced elements),如<img>和<video>元素一直存在長寬比的控制問題,特別是在響應(yīng)式設(shè)計中,如何在不同設(shè)備,不同分辨率下對這些元素的長寬進(jìn)行響應(yīng)。例如,您可能想以圖片的正確尺寸,不想扭曲圖像,也不想失去圖像的長寬比例,讓圖片占據(jù)一定的空間。按照長寬比例調(diào)整和縮略圖像的畫面比擠壓和拉伸圖像是一個更優(yōu)雅的解決方案。
在CSS3中我們可以使用object-fit和object-position來處理。“object-fit”屬性指定了替換元素的內(nèi)容應(yīng)該如何使用他的寬度和高度來填充其容器。“object-position”屬性指定了替換元素在容器中的對齊方式。
欲要了解這兩個屬性的具體使用,我們先從其語法和屬性值作用入手。
object-fit語法
object-fit屬性的語法非常的簡單:
object-fit: fill | contain | cover | none | scale-down
object-fit取值說明
object-fit主要適合于替換元素,比如:<video>、<object>、<img>、<input type="image">、<svg>、<svg:image>和<svg:video>等。其默認(rèn)值為fill。object-fill取值的說明如下:
來看官網(wǎng)提供的一個效果示意圖:
object-position語法
object-position的語法和CSS中的background-position非常的類似:
object-position: <position>
其主要適用于替換元素,如:<video>、<object>、<img>、<input type="image">、<svg>、<svg:image>和<svg:video>等。其默認(rèn)值為“50% 50%”(center)。
object-position屬性決定了它的盒子里面替換元素的對齊方式。其取值和CSS中background-position屬性取值一樣。如下所示:
img {
height: 100px;
width: 100px;
object-fit: contain;
object-position: top 75%;
}
object-fit和object-position屬性到目前為止,瀏覽器的兼容并不很好,支持的瀏覽器僅有Opera12.1(還需要添加其私有前綴-o-)和Opera Mobile11.5~12.1。不過值得慶幸的是Chrome32+將會支持這兩個屬性。其詳細(xì)的兼容說明如下所示:
在寫本教程的時候,你可以使用Google Chrome Canary瀏覽器來進(jìn)行測試。(在下文中的用例,使用的是Google Chrome Canary33進(jìn)行的效果測試)。
在任何替換元素上都可以使用object-fit屬性。前面主要介紹了object-fit各屬性的理論知識,接下來,使用簡單的用例來加以說明各屬性值的使用與效果。
為了更好的說明效果,我們在這里引入一張簡單的圖像:
HTML結(jié)構(gòu)
結(jié)構(gòu)很簡單,就是一張簡單的圖片:
<div>
<img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1312/object-test.jpg" alt="Object-fit Example" />
</div>
CSS樣式
簡單地添加一點樣式:
div {
margin: 20px;
text-align: center;
}
img {
width: 300px;
height: 300px;
border: 1px solid black;
background-color: #ccc;
}
其默認(rèn)效果如下所示:
fill效果
在原始效果的基礎(chǔ)上,我們先來添加object-fit屬性的fill效果:
img {
width: 300px;
height: 300px;
border: 1px solid black;
background-color: #ccc;
object-fit:fill;
}
效果如下:
從效果上看,和默認(rèn)的效果沒有兩樣。
contain效果
把object-fill值換成contain,如下所示:
img {
width: 300px;
height: 300px;
border: 1px solid black;
background-color: #ccc;
object-fit:contain;
}
其效果如下所示:
當(dāng)object-fit取值為contain時,效果有明顯的變化。按一定的長寬比例進(jìn)行了圖片的縮放。
cover效果
img {
width: 300px;
height: 300px;
border: 1px solid black;
background-color: #ccc;
object-fit:cover;
}
效果如下:
當(dāng)object-fit取值為cover時,圖片以原中心為基點,向外擴(kuò)展,超出容器大小部分會自動截取。
none效果
img {
width: 300px;
height: 350px;
border: 1px solid black;
background-color: #ccc;
object-fit:none;
}
效果如下:
取值為none時,圖像以原點向外擴(kuò)展。
scale-down效果
img {
width: 300px;
height: 300px;
border: 1px solid black;
background-color: #ccc;
object-fit:scale-down;
}
效果如下:
上在演示了object-fit屬性在不同取值下的效果。為了更好地看出他們之前的變化,我們通過幾個不同的gif圖來動態(tài)演示他們其中的不一致之處。
fill動畫演示
圖片一直會填充整個替換元素,并且圖片按一定的比例對畫面進(jìn)行調(diào)整。
contain動畫演示
圖片按一定的比例進(jìn)行畫面的調(diào)整,會出現(xiàn)圖片水平和垂直方向留白現(xiàn)象。極其類似于background-size屬性取為contain時的效果。
none動畫演示
當(dāng)圖片尺寸設(shè)置得比原始尺寸小時,圖片原點不動,超出部分會自動截取;當(dāng)圖片尺寸設(shè)置比原始尺寸大時,四周會留白。
cover動畫演示
圖片會一直填充,超出部分會自動截取。極其類似于background-size屬性中取值為cover的效果。
scale-down的動畫演示
有點類似于object-fit取值為contain時效果。
前面說過,object-position類似于background-position,并且取值可以和background-position取值一樣。不過object-position主要用于調(diào)整替換元素的對齊方式。我們簡單地來看一個示例:
img {
width: 300px;
height: 300px;
border: 1px solid black;
background-color: #ccc;
object-fit:contain;
object-position: 10px 10px;
}
效果如下:
為了更好地了解object-position的使用,我們同樣來看一個動畫演示效果圖:
我們平時在瀏覽網(wǎng)站的過程中如果只有文字的話難免會有些太單調(diào)了,并且看文字多了眼睛也會比較難受,這時我們想要讓我們的網(wǎng)頁更漂亮更吸引人眼球,那么肯定少不了精美的圖片來進(jìn)行點綴,這就用到了今天我要教給大家的圖像標(biāo)簽img。
src:圖片的路徑 這個是必須要有的
title:當(dāng)我們把鼠標(biāo)移動到圖片上展示的文本內(nèi)容
alt:當(dāng)圖片的路徑錯誤或圖片有問題時瀏覽器無法識別渲染的情況下展示的文本內(nèi)容
width:設(shè)置圖片的寬度
height:設(shè)置圖片的高度
源代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圖像標(biāo)簽</title> </head> <body> <pre> ../:代表上一級目錄 ../../:上上級目錄 當(dāng)前目錄中的文件夾下使用:文件夾名稱/圖片名稱 上n級目錄下的n級文件夾:n個../+n個文件夾的名稱直到找到圖片文件為止 </pre> <img src="奶茶妹妹.png" width="500" height="300" title="這是同一個目錄下的圖片"><br> <img src="" alt="對不起,圖片走丟了"> <img src="img/章澤天.png" title="這是同一目錄中文件夾下的圖片"><img src="../田馥甄.png" width="350" height="300" title="這是上一級目錄中的圖片"> <img src="../img/高圓圓.png" title="這是上級目錄中某個文件夾下的圖片"> </body> </html> |
瀏覽器預(yù)覽效果圖
以上就是img圖片標(biāo)簽的簡單應(yīng)用
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。