「前端技術」Web端高dpi圖片適配方案

近經手一個web項目，需要考慮前端多種尺寸屏幕的圖片適配問題，也是關于ui設計導出1X&2X切圖如何使用的方法，現在整理一下高dpi屏幕的web端適配方案，希望對大家能有幫助。

面向高dpi顯示屏的適配方案主要有以下幾種：

1、javascript選擇圖片進行加載

方法：通過 window.devicePixelRatio 獲取設備像素比率，獲取屏幕寬度和高度，甚至可能通過navigator.connection或發出假請求，如foresight.js庫做一些網絡連接嗅探。收集所有這些信息后再決定要加載哪個圖片。

優點：兼容低版本瀏覽器

缺點：圖像加載會有延遲

2、用服務端選擇加載圖片

方法：為每個圖片編寫自定義請求處理程序來處理。這樣的處理程序將基于User-Agent（中繼到服務器的唯一信息）檢查Retina支持。然后，根據服務器端邏輯決定是否要提供高DPI圖片來加載適當的資產（根據一些已知的慣例命名）。

優點：兼容低版本瀏覽器

缺點：用戶代理不一定提供足夠的信息來決定設備是否應該接收高質量或低質量的圖像。此外，與User-Agent相關的任何內容都可能成為被攻擊的漏洞，應該盡量避免使用。

3、通過CSS媒體查詢

方法：

#image { background: (low.png); }
@media only screen and (min-device-pixel-ratio: 1.5) {
 #image { background: (high.png); }
}

優點：兼容比較廣泛，ie9以上瀏覽器基本都支持；可以靈活地選擇響應斷點（例如，可以加載低，中和高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">

優點：代碼清晰，代碼量較少，適配比較簡單

缺點：稍微低版本的瀏覽器都不兼容，不過沒關系，至少可以顯示默認尺寸的圖片

5、個人感覺的最優方案

所有的圖標盡量用svg和css來實現，而高品質圖片可以結合方案4的瀏覽器新特性來適配。

個人整理，如有錯誤或更好方法，歡迎分享，謝謝！

響應式設計(RWD)中，令大家最頭痛的問題的是圖片的自適應處理問題。往往我采取的處理方式是給圖片的容器設置一個尺寸，然后給圖片設置下面的代碼：

img {
    max-width: 100%;
    height: auto;
}

但往往需要處理的不止于此。你可能想要讓圖像長寬比例來填充他的整個容器，想重新定位他的中心位置。或者，如果你想按長寬比例響應式調整iframe，你可能會真正地碰到麻煩。當然也有修復的方法，但所有人都在說：

媒體調整的行為將會失控！

是的，現在我們要解決這個問題。CSS標準提出屬性object-fit和object-position可以解決這樣的問題。

Chris Mills在2011年發表了一篇The CSS3 object-fit and object-position properties，文章中詳細介紹了object-fit和object-position屬性的使用。今天我們也將深入學習和了解這兩個屬性的具體使用。

功能簡介

在CSS中，替換元素(replaced elements)，如<img>和<video>元素一直存在長寬比的控制問題，特別是在響應式設計中，如何在不同設備，不同分辨率下對這些元素的長寬進行響應。例如，您可能想以圖片的正確尺寸，不想扭曲圖像，也不想失去圖像的長寬比例，讓圖片占據一定的空間。按照長寬比例調整和縮略圖像的畫面比擠壓和拉伸圖像是一個更優雅的解決方案。

在CSS3中我們可以使用object-fit和object-position來處理。“object-fit”屬性指定了替換元素的內容應該如何使用他的寬度和高度來填充其容器。“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>等。其默認值為fill。object-fill取值的說明如下：

fill: 此值為object-fit的默認值，替換內容的大小被設置為填充元素的內容框，也就是說，元素的內容擴大到完全填充容器的外形尺寸，即使這打破其內在的寬高比。
contain：替換元素內容大小保持長寬比例填充元素內容容器，其具體對象大小被解析為一個包含元素的寬度和高度。也就是說，如果你在替換元素上設置一個明確的高度和寬度，此值將導致內容大小完全在固定的比例顯示，但仍在元素尺寸內顯示。
cover：替換元素內容大小保持長寬比例填充元素內容容器，其具體對象大小被解析為覆蓋整個元素的寬度和高度。也就是說，替換元素內容大小保持長寬比，但改變寬度和高度，以便完全覆蓋內容元素。
none：替換元素內容不調整大小以適應內部元素的容器，內容完全忽略設置在元素上的任何高度和權重，并且仍在元素尺寸內顯示。
scale-down：當內容大小設置了non或contain，將導致具體對象變得更小。

來看官網提供的一個效果示意圖：

object-position語法

object-position的語法和CSS中的background-position非常的類似：

object-position: <position>

其主要適用于替換元素，如：<video>、<object>、<img>、<input type="image">、<svg>、<svg:image>和<svg:video>等。其默認值為“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+將會支持這兩個屬性。其詳細的兼容說明如下所示：

在寫本教程的時候，你可以使用Google Chrome Canary瀏覽器來進行測試。（在下文中的用例，使用的是Google Chrome Canary33進行的效果測試）。

object-fit的應用

在任何替換元素上都可以使用object-fit屬性。前面主要介紹了object-fit各屬性的理論知識，接下來，使用簡單的用例來加以說明各屬性值的使用與效果。

為了更好的說明效果，我們在這里引入一張簡單的圖像：

HTML結構

結構很簡單，就是一張簡單的圖片：

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

其默認效果如下所示：

fill效果

在原始效果的基礎上，我們先來添加object-fit屬性的fill效果：

img {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  background-color: #ccc;
  object-fit:fill;
}

效果如下：

從效果上看，和默認的效果沒有兩樣。

contain效果

把object-fill值換成contain，如下所示：

img {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  background-color: #ccc;
  object-fit:contain;
}

其效果如下所示：

當object-fit取值為contain時，效果有明顯的變化。按一定的長寬比例進行了圖片的縮放。

cover效果

img {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  background-color: #ccc;
  object-fit:cover;
}

效果如下：

當object-fit取值為cover時，圖片以原中心為基點，向外擴展，超出容器大小部分會自動截取。

none效果

img {
  width: 300px;
  height: 350px;
  border: 1px solid black;
  background-color: #ccc;
  object-fit:none;
}

效果如下：

取值為none時，圖像以原點向外擴展。

scale-down效果

img {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  background-color: #ccc;
  object-fit:scale-down;
}

效果如下：

上在演示了object-fit屬性在不同取值下的效果。為了更好地看出他們之前的變化，我們通過幾個不同的gif圖來動態演示他們其中的不一致之處。

fill動畫演示

圖片一直會填充整個替換元素，并且圖片按一定的比例對畫面進行調整。

contain動畫演示

圖片按一定的比例進行畫面的調整，會出現圖片水平和垂直方向留白現象。極其類似于background-size屬性取為contain時的效果。

none動畫演示

當圖片尺寸設置得比原始尺寸小時，圖片原點不動，超出部分會自動截取；當圖片尺寸設置比原始尺寸大時，四周會留白。

cover動畫演示

圖片會一直填充，超出部分會自動截取。極其類似于background-size屬性中取值為cover的效果。

scale-down的動畫演示

有點類似于object-fit取值為contain時效果。

object-position應用

前面說過，object-position類似于background-position,并且取值可以和background-position取值一樣。不過object-position主要用于調整替換元素的對齊方式。我們簡單地來看一個示例：

img {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  background-color: #ccc;
  object-fit:contain;
  object-position: 10px 10px;
}

效果如下：

為了更好地了解object-position的使用，我們同樣來看一個動畫演示效果圖：

mg標簽的應用場景

我們平時在瀏覽網站的過程中如果只有文字的話難免會有些太單調了，并且看文字多了眼睛也會比較難受，這時我們想要讓我們的網頁更漂亮更吸引人眼球，那么肯定少不了精美的圖片來進行點綴，這就用到了今天我要教給大家的圖像標簽img。

img標簽的組成

src：圖片的路徑這個是必須要有的

title：當我們把鼠標移動到圖片上展示的文本內容

alt：當圖片的路徑錯誤或圖片有問題時瀏覽器無法識別渲染的情況下展示的文本內容

width：設置圖片的寬度

height：設置圖片的高度

img標簽的使用

源代碼

<!DOCTYPE html>

<head>

</head>

<body>

<pre>

../:代表上一級目錄

../../：上上級目錄

當前目錄中的文件夾下使用：文件夾名稱/圖片名稱

上n級目錄下的n級文件夾：n個../+n個文件夾的名稱直到找到圖片文件為止

</pre>

<img src="img/章澤天.png" title="這是同一目錄中文件夾下的圖片"><img src="../田馥甄.png" width="350"

height="300" title="這是上一級目錄中的圖片">

</body>

</html>

瀏覽器預覽效果圖

以上就是img圖片標簽的簡單應用

在線咨詢

上一篇：這里有一份HTML的超全教程，自學建網站不再是夢
下一篇：Web 性能優化：使用 CSS font-display 控制字體加載和替換

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

「前端技術」Web端高dpi圖片適配方案

功能簡介

語法和取值說明

瀏覽器兼容性

object-fit的應用

object-position應用

mg標簽的應用場景

img標簽的組成

img標簽的使用

您的項目需求