画面サイズでないimgサイズに基づいてHTML5またはCSS3で別の画像を読み込み

Question

img要素サイズがスクリーン/ビューポートサイズではないWebページに画像を読み込みたいとします。

例えば、res-100px.pngには100pxの解像度を、res-200px.pngには200pxの解像度の2つの画像があります。

imgの幅が100px以下の場合res-100px.pngイメージ。 imgの幅が100pxより大きい場合は、負荷res-200px.pngイメージ。

私の心に何があるのか​​理解していただければ幸いです。

JSを使用せずにHTML5とCSS3だけでこれを解決できますか？可能であれば、いくつか例を挙げてください。

ありがとうございます。

Answer 1

この場合は特別な要素があります。タイプが表示可能であるならば、あなたの画像をSVGとして見ることができる場合には、例えば、検出することができ、またはそれは、ディスプレイサイズに基づいて切り替えることができますpicture

​<picture> 
<source srcset="mdn-logo.svg" type="image/svg+xml"> 
<!-- Load SVG preferrably --> 

<source srcset="large.jpg 1024w, 
    medium.jpg 640w, 
    small.jpg 320w" sizes="33.3vw"> 
<!-- Load image for size(s) --> 


<source srcset="logo-big.png" media="(min-width: 600px)"> 
<source srcset="logo-small.png" media="(max-width: 600px)"> 
<!-- Load image for size(s) --> 

<img src="mdn-logo.jpg" alt="MDN"> 
<!-- Display fallback image (not it will probably be IE9 so you can include thebig variant) --> 
</picture> 

を参照してください。また、新しいブラウザでは表示されない、imgという形で素晴らしいフォールバックを持っています。

Answer 2

さてあなたは...各画像の幅を取得するためのjQueryを試してみて、あなたが望む基準に応じたクラスを追加し、単に画像やwathever必要を追加することができ

$('img').addClass(function() { 
    if (this.height > 200) { 
     return 'show-res-200px'; 
    } else { 
     return 'show-res-100px'; 
    } 
}); 

チェックこれをJsFiddle