応答の写真達成

まず、背景画像が応答を実現するために

図1は、網膜の画面に適合するために、伝統的なCSS3の実装は、それぞれ、幅と高さによってロードされる二回の画像に拡大し、その後によってメディアクエリー背景画像サイズが「背景サイズ：50％50％を倍に低減されます。」例えば：

.mod .hdさh3 { 背景画像：URL（http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png） 。/ * 普通屏幕* / }
 / * -------------網膜------------- * / 
@mediaのみ画面と（-O-MIN-デバイス-pixel比：2/1）、/ * オペラ* / 
       のみ画面（MIN - MOZデバイスピクセル比：2）、/ * Firefoxの16之前* / 
       のみ画面（-webkit-MIN-デバイス-pixel比：2）、/ * のWebkit * / 
       のみ画面と（MIN-解像度：240dpi）、/ * 标准* /
       スクリーンと（最小分解能：2dppx）だけ/ * 标准* / { 
　　の.mod .hdのH3 { 
   　　 背景画像：URL（http://img04.taobaocdn.com/tps/i4/T1947tXmJhXXcCfooh-210-320.png） ; 
   　　 背景サイズ：105px 155px ; 
　　} 
}

図2に示すように、使用した画像セットを

明らかに、メディアクエリーは、「応答画像」を達成するために、まだ非常に面倒、保守性CSSコードは高くはないが、いくつかのハックの味があります。私たちは、それが幸運ことで、ネイティブ構文の一つは別の画像を選択することが予想される CSS画像レベル4 のこのネイティブ構文の実現にに「画像セット。」

背景画像：のURL（http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png）。/ * 普通屏幕* / 
背景画像：-webkit-画像セット（
    URL（http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png）1倍、
    URL（のhttp：// img04 .taobaocdn.com / TPS / I4 / T1947tXmJhXXcCfooh-210-320.png）2X）。/ * 網膜* /

第二に、一般的な画像です実現するための応答

問題応答背景画像を解決するためのCSS「画像セット」が、それを行う方法でHTMLのimg要素？

1、@brucelドラフトは解決します

2011年11月 @brucelは、 HTML5のドラフトは解決提示しました：

<画像> 
    <ソースSRC = "landscape.webp"タイプ= "画像/ WEBP"メディア= "画面と（最小幅：20em）と（方向：横）" /> 
    <ソースSRC = "landscape.jpg"タイプ= "画像/ JPG"メディア= "画面と（最小幅：20em）と（方向：横）" /> 
    <ソースSRC = "portrait.webp"タイプ= "画像/ WEBP"メディア= "画面（MAX -width：20em）および（配向：肖像）」/> 
    <ソースSRC = "portrait.jpg"タイプ= "画像/ JPG"メディア= "画面（最大幅：20em）および（配向：肖像）" / > 
　　<！ -不支持的浏览器降级处理- >
　　< > </絵>img src="fallback.jpg" alt="fancy pants"

新しいsrcsetプロパティを使用して2、

W3Cのコミュニティのディスカッショングループ応答画像コミュニティグループがされて入ってきました。ここでは、最新の規範：http://picture.responsiveimages.org/ （W3C http://www.w3.org/TR/html-picture-element/ ）。このリリースの時点では、それは2013年4月24日、仕様例最後に更新されました：

<画像幅= "500"高さ= "500"> 
　　<ソースメディア= "（最小幅：45em）" srcset = "大1.JPGの1X、大2.JPG 2X"> 
　　<ソースメディア= "（最小幅：18em） "srcset = "MED-1.JPG 1X、MED-2.JPG 2X"> 
　　<ソースsrcset = "小1.JPGの1X、小2.JPG 2X"> 
　　<IMG SRC ="小さな-1.JPG」ALT = ""> 
　　<P>アクセテキスト</ P> 
</絵>

注：srcsetは、ビデオ、オーディオなどのタグに適用されます。

<映像> 
    <ソースSRC = "video.mp4"タイプ= "ビデオ/ MP4" /> 
    <ソースSRC = "video.webm"タイプ= "ビデオ/ WEBM" /> 
    <ソースSRC = "video.ogv"タイプ= "ビデオ/ oggの" /> 
    <IMG SRC = "fallback.jpg" ALT = "ファンシーパンツ" /> 
    <！ - fallback.jpgは常に*です*ダウンロード- > 
</ビデオ>

参考：

ます。https：//www.cnblogs.com/JoannaQ/p/3157952.htmlで再現

おすすめ