好用的幾種經常使用的響應式設計讓圖片自適應的辦法

時間 2019-11-12

標籤好用幾種經常使用響應設計圖片自適應辦法欄目 CSS 简体版

原文原文鏈接

Ethan Marcotte曾經在A List Apart上發表過一篇名爲「Responsive Web Design」的文章，他當時就提出了響應式架構的概念（很多混跡技術圈的確定看過這篇文章，這裏就再也不贅述了）。隨着終端設備的日益豐富，沒法針對設備類型、尺寸或瀏覽器進行自適應調整的圖像會嚴重減慢網站的訪問速度，最終致使用戶流失。html

一，談到圖片自適應，不少前端開發人員會不假思索的來一句「寬度100%」前端

例如：web

 1 <html>
 2 　　<head>
 3 　　　　<style>
 4 　　　　　　html,body{width:100%;height:100%;margin:auto 0px;padding:auto 0px;text-align:center;}
 5 　　　　　　.imgBox, .imgBox img{width:100%;height:100%;}
 6 　　　　</style>
 7 　　</head>
 8 <body>
 9 　　<div class="imgBox">
10 　　　　<img src="1.jpg" />
11 　　</div>
12 </body>
13 </html>

<html>
　　<head>
　　　　<style>
　　　　　　html,body{width:100%;height:100%;margin:auto 0px;padding:auto 0px;text-align:center;}
　　　　　　.imgBox, .imgBox img{width:100%;height:100%;}
　　　　</style>
　　</head>
<body>
　　<div class="imgBox">
　　　　<img src="1.jpg" />
　　</div>
</body>
</html>canvas

精髓能夠是這樣一行CSS代碼：瀏覽器

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

img{ width:100%;height:auto;max-width:100%;display:block;}架構

若是背景圖片，就用background-size，例如：
爲canvas標籤增長自定義背景：佈局

1 #myCanvas {
2 　　background-image: url(${webRoot }/webpage/weixin/images/agency.jpg);
3 　　background-size: 100%;
4 }

#myCanvas {
　　background-image: url(${webRoot }/webpage/weixin/images/agency.jpg);
　　background-size: 100%;
}
注：url中是圖片的路徑，你們需自行修改。網站

沒錯，就是這麼一行簡短的代碼！部分前端開發者認爲這行代碼既簡潔又高效，很好地解決了圖片自適應問題，但有部分前端開發者認爲這種方法沒法解決分辨率問題，沒法保證圖片不失真，這個問題到底應該如何解決呢？url

一個圖像版本顯然是不夠的，爲了確保各個屏幕尺寸之間的平滑過渡，設計師必須以不變應萬變。也就是說，必須採起靜態的方式使圖像適應性更強。對於靈活的佈局大小和屏幕密度的多樣性都有相同的解決方案：提供可變分辨率的圖像。圖片分爲背景圖片和經過img標籤引入的圖片，咱們是應該使用高分辨率圖像來利用高分辨率硬件，仍是使用小圖像以便在低分辨環境中快速加載？spa

經過提供同一圖像的不一樣版本（大小和分辨率），能夠向須要的網站訪問者發送高分辨率版本，爲不具備此功能的網站提供較低分辨率的版本。要了解須要多少不一樣版本，能夠採起如下步驟：

創建尺寸和分辨率範圍的極限，並記錄各類尺寸和分辨率。
使用新的響應式圖像標記來標記備用版本，以便瀏覽器能夠加載最適合用戶屏幕分辨率和窗口大小的版本。
具體到代碼級，前端開發應該怎麼作呢？

面對格式問題，咱們能夠儘可能讓瀏覽器替咱們決定。過去，實際上只有四種圖像格式具有通用接受性：GIF，JPEG，PNG或SVG。然而，今天的響應式，太多可變格式的圖像容許開發者使用新的技術，以即可以在支持的瀏覽器中使用其餘更新更好的格式，在不支持的瀏覽器中繼續使用舊格式。

<img src="800px.png" srcset="400px.png 400w, 800px.png 800w, 1600px.png 1600w, 2400px.png 2400w, 3200px.png 3200w" sizes="80vw">

綜述

網站加載時間延遲一秒就可能會致使網站轉化率降低7％，建立響應式Web環境是棘手的，它須要微妙的平衡。可是，在不一樣屏幕尺寸和設備功能的世界中，創建這種圖片自適應是必要的。總結下來基本是兩種方法：若是不在意分辨率，開發者能夠沿用寬度100%的方法，這種方法是最簡便的；若是須要考慮分辨率，就須要查詢清楚不一樣設備的分辨率，而後採用第三方服務或在代碼層自主進行設置。