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

<picture alt="">

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

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

<source src=lores.png>

<!-- 不支持的瀏覽器降級(jí)處理 -->

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

</picture>

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

<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」屬性類(lèi)似「p_w_picpath-set」，通常情況下，「srcset」里面的資源是具有 fallback 特性的，也就是說(shuō)第一個(gè)圖片資源無(wú)法加載的時(shí)候可以跳過(guò)加載后面的備用資源。但是 Apple 的 eoconnor 提出的方案是這樣的：

<img src="foo-lores.jpg"

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

? ? foo-superduperhires.jpg 6.5x"

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

任何一個(gè)新標(biāo)準(zhǔn)的提出，都會(huì)存在各種不同的聲音，這是好事，作為網(wǎng)頁(yè)的最終開(kāi)發(fā)者其實(shí)并不太關(guān)心實(shí)現(xiàn)語(yǔ)法。有任何問(wèn)題大家也可以直接到 HTML5 中文興趣小組參與討論。

我們可以在CSS 中使用「p_w_picpath-set」屬性值，因?yàn)槟壳按蟛糠?Retina 屏幕的設(shè)備的瀏覽器都是基于 Webkit 內(nèi)核的，如果有特殊的需求可以使用 Media Queries。

查看原文請(qǐng)參考網(wǎng)址：http://mingkr.com/html5-response-img

查看原文網(wǎng)站首頁(yè)：http://mingkr.com

轉(zhuǎn)載于:https://blog.51cto.com/mingkrcom/1437315

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。