Загрузите разные изображения с помощью HTML5 или CSS3 на основе размера img, а не размера экрана

Question

Я хочу загрузить изображение на веб-страницу на основе img размер элемента не размер экрана/видового экрана.

Например, у меня есть два изображения, такие как res-100px.png с разрешением 100 пикселей и res-200px.png с разрешением 200 пикселей.

Если ширина img меньше или равна нагрузке 100px res-100px.png изображение. Если img ширина больше 100px нагрузка res-200px.png изображение.

Надеюсь, вы понимаете, что у меня на уме.

Итак, можно ли разрешить это только с помощью HTML5 и CSS3 без JS. Если возможно, укажите пример.

Заранее спасибо :)

Answer 1

Существует специальный элемент только для этого случая. См 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> 

Он может обнаружить, если тип является отображаемым, например, если изображение можно рассматривать как SVG, или он может переключаться в зависимости от размера дисплея. Он также имеет хороший резерв в форме img, который не отображается более новыми браузерами.

Answer 2

Ну вы могли бы попробовать Jquery, чтобы получить ширину каждого изображения и добавить класс в зависимости от критериев, которые вы хотите, а затем просто добавить в изображение или wathever вам нужно ...

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

Проверить это JsFiddle