景德鎮前人網絡——前人栽樹,后人乘涼。我們已提前給您做了很多探索。 



新聞動態

圖片展示

響應式圖像終于有超贊的解決方案了!

發表時間: 2017-12-05 11:43:28

關注: 232

發者和設計師們競相尋求處理響應式圖片的方法。這的確是一個棘手的問題 ,因為我們對同一個網站在眾多設備寬度下,使用同一圖像源。你愿意在一個大顯示屏上顯示模糊地、馬賽克狀的圖像?

固定寬度圖像:基于設備像素比選擇

視網膜屏幕的廣泛應用,使我們不僅需要考慮屏幕分辨率,而且也需要考慮像素密度。視網膜屏幕,4K顯示器,UltraHD-它們都比相同尺寸的標準分辨率顯示器填充了更多的像素。更多的像素=更清晰的圖像。

有些圖片不管屏幕尺寸,始終以固定寬度顯示-如站點logo或人物簡介圖像,也就是說需要根據設備像素比來選擇。瀏覽器將根據設備像素比來選擇加載哪張圖像。

srcset屬性列出了瀏覽器可以選擇加載的源圖像池,是一個由逗號分隔的列表。x描述符表示圖像的設備像素比。瀏覽器根據運行環境,利用這些信息來選擇適當的圖像。不理解srcset的瀏覽器會直接加載src屬性中聲明的圖像。

上例中,我們告訴瀏覽器在viewport寬度小于400像素時,使圖像的寬度與viewport等寬。在viewport寬度小于960像素時,使圖像的寬度為viewport寬度的75%。當viewport大于960像素時,使圖像的寬度為640像素。如果你不熟悉vw ,可以看看Tim Severien的大文viewport單位詳解 。

瀏覽器利用srcsetsizes信息來選擇最符合規定條件的圖像。如果瀏覽器的viewport是600像素,圖像最可能以75vw的寬度顯示。瀏覽器將嘗試加載第一張大于450像素(600*0.75)的圖像,也就是uswnt-480.jpg。如果我的是dpr為2的Retina顯示屏,那么瀏覽器就會嘗試加載第一張大于900像素(600*0.75*2)的圖像,也就是uswnt-960.jpg。我們無法確定究竟顯示哪張圖像,因為每個瀏覽器根據我們提供的信息挑選適當圖像的算法是有差異的。(譯者注:srcset和size列表是對瀏覽器的一個建議(hint),而非指令。例如,設備像素比(dpr)為1.5的設備,亦可用1x也可用2x的圖像,由瀏覽器根據其能力、網絡等因素來決定。)

前兩個例子都是以不同質量顯示相同的圖像,僅用srcset屬性就足夠了。不必擔心老舊瀏覽器,老舊瀏覽器會把它看作為一個普通的圖像并從src中加載。如果你想在不同寬度下顯示稍微不同的圖像,比如在較窄屏幕下僅顯示圖像的關鍵部分,那么要使用picture元素。

picture:基于Art direction(美術設計)選擇

picture元素就像是圖像和其源的容器。瀏覽器仍然需要img元素,用來表明需要加載圖片,如果沒有img,那么什么都不會渲染。source為瀏覽器提供了要顯示圖像的供選版本。基于美術設計選擇的適用場景為:在一個特定的轉效點(breakpoint)需要顯示一個特定的圖像。使用picture元素選擇圖像,不會有歧義。


景德鎮前人網格版權所有,業務QQ:568780829,手機15207080766,地址:景德鎮市珠山區昌江瑞景后面333棟202室

客服中心
熱線電話
15207080766
上班時間
周一到周五
二維碼
福建31选7走势图带连线