（翻訳）応答絵 - srcset財産とサイズ - コードワールド

応答Webデザイン革命では、画像は潮を落下させるものであるように思われます。最近まで、異なる画面サイズと画素密度に応じて、まだ完全には実現していない別の画像を提供することを目的とします。

<picture>要素は、この状況を変えるために、希望の多くを示しているが、関係なく、あなたは完全に画像素子を使用できるかどうかの2つのプロパティの応答画像のための2つの非常に重要である- srcsetとsizes。

`srcset`プロパティ

srcsetImageプロパティは、私たちは、ブラウザによって使用される可能性のあるリソースの範囲を提供することができます。私たちは、ユーザーエージェントがページに表示される画像に基づいて、どのデバイスの特性を決定するために使用される、カンマで区切られた画像のリストを提供します。

画像を一覧表示する場合、各画像は、我々は2つの情報を提供します -

_ _画像ファイルへのパス
_幅イメージファイルまたは_ _ _画素密度の
画素密度を_ _定義するために、我々は、追加x画像の濃度値を表すために。栗のために-

<img src="one.png"  
     srcset="two.png 2x, three.png 3x, four.png 4x"\>

絵でsrc絵のようにデフォルトで定義されました1x。

2012年に、srcset上記の例に示すように、プロパティ初めて、我々は、画像の異なるピクセル密度をのみ提供することができます。しかし、2014年に、私たちは新たな付加width私たちは幅に応じて、異なる画像を提供することを可能にするプロパティを、。

画像の幅を指定するには、我々は追加wの画像を表現するピクセル幅を。栗のために-

<img src="one.png"  
     srcset="two.png 100w, three.png 500w, four.png 1000w"\>

唯一のsrcset幅を使用し、我々はセットに従うことができますsizesプロパティ。

`sizes`プロパティ

sizesプロパティは明らかに画像のサイズが異なる培地条件で表示されなければならない定義されています。

<img src="one.png"  
     srcset="two.png 100w, three.png 500w, four.png 1000w"

     sizes="<media condition> <width>,
            <media condition> <width>,
            <optional default image width>"\>

メディアの条件

メディア条件は、正確なメディアクエリではありません。これは、メディアクエリの一部です。彼は私たちのようなメディアタイプ、の明確な定義を許可しなかったscreenかprint、しかし、私たちは頻繁にメディアクエリを使用することができます。

それは使用することができます -

、普通のメディア条件(min-width: 900px)
以下のような「ない」メディア条件( not (orientation: landscape) )
以下のような「と」メディア条件(orientation: landscape) and (min-width: 900px)
以下のような「または」メディア状態( (orientation: portrait) or (max-width: 500px) )

幅

widthあなたは、たとえば、長さの任意の単位であってもよい：全角、REM、ピクセル、およびビューポートの幅。

しかし、単位の割合は、あなたが相対単位を使用する必要がある場合は、許可されていないvwお勧めします。

合体

入れMedia Conditions とwidth一緒に-

<img src="one.png"  
     srcset="two.png 100w, three.png 500w, four.png 1000w"

     sizes="(min-width: 900px) 1000px,(max-width: 900px) and (min-width: 400px) 50em,
            ( not (orientation: portrait) ) 300px,
            ( (orientation: landscape) or (min-width: 1000px) ) 50vw, 
            100vw"\>

ブラウザのサポート

ブラウザがこのプロパティをサポートしていないために、ちょうどロードsrc写真のリソースを。

译自：応答画像- srcsetとサイズ属性