CSS「p_w_picpath-set」 解決了背景圖片的響應式問題，但是 HTML中的 img 元素如何處理？

<picture alt="">

<source src=hires.png media="min-width:800px">

<source src=midres.png media="min-width:480px">

<source src=lores.png>

<!-- 不支持的瀏覽器降級處理 -->

<img src=midres.png alt="">

</picture>

于此同時，其他的一些想法如雨后春筍般涌現出來，于是 W3C 社區討論組 Responsive Images Community Group 應運而生。最新的規范在這里：http://picture.responsivep_w_picpaths.org/ （W3C http://www.w3.org/TR/html-picture-element/）。截止本文發布時間，最近一次更新是 2013年4月24日，規范示例：

<picture width="500" height="500">

<source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x">

<source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x">

<source srcset="small-1.jpg 1x, small-2.jpg 2x">

<img src="small-1.jpg" alt="">

<p>Accessible text</p>

可以看到這里的「srcset」屬性類似「p_w_picpath-set」，通常情況下，「srcset」里面的資源是具有 fallback 特性的，也就是說第一個圖片資源無法加載的時候可以跳過加載后面的備用資源。但是 Apple 的 eoconnor 提出的方案是這樣的：

<img src="foo-lores.jpg"

? ? srcset="foo-hires.jpg 2x,?

? ? foo-superduperhires.jpg 6.5x"

? ? alt="decent alt text for foo.">

任何一個新標準的提出，都會存在各種不同的聲音，這是好事，作為網頁的最終開發者其實并不太關心實現語法。有任何問題大家也可以直接到 HTML5 中文興趣小組參與討論。

我們可以在CSS 中使用「p_w_picpath-set」屬性值，因為目前大部分 Retina 屏幕的設備的瀏覽器都是基于 Webkit 內核的，如果有特殊的需求可以使用 Media Queries。

查看原文請參考網址：http://mingkr.com/html5-response-img

查看原文網站首頁：http://mingkr.com

轉載于:https://blog.51cto.com/mingkrcom/1437315

總結

以上是生活随笔為你收集整理的HTML5 处理响应式图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。