Как определить подходящий размер изображения для устройства из списка доступных размеров?

Question

Для элемента, у меня есть изображения доступны в следующих размерах:

[ { "h": 1004, "w": 768 }, { "h": 748, "w": 1024 }, { "h": 460, "w": 320 }, { "h": 920, "w": 640 }, { "h": 300, "w": 480 }, { "h": 600, "w": 960 }, { "h": 720, "w": 1280 } ] 

Как я могу написать функцию в JavaScript/AngularJS вернуть ближайший подходящий размер, основанный на текущем устройстве, разрешения и ориентации?

Answer 1

Вот пример использования медиа запросов: https://jsfiddle.net/DIRTY_SMITH/88z7u4kf/

body { 
    background-image: url("http://lorempixel.com/1200/1200/"); 
    background-repeat: no-repeat; 
    background-color: #cccccc; 
} 

@media (max-width: 1000px) { 
    body { 
    background-image: url("http://lorempixel.com/1000/1000/"); 
    } 
} 
@media (max-width: 800px) { 
    body { 
    background-image: url("http://lorempixel.com/800/800/"); 
    } 
} 
@media (max-width: 600px) { 
    body { 
    background-image: url("http://lorempixel.com/600/600/"); 
    } 
} 
@media (max-width: 400px) { 
    body { 
    background-image: url("http://lorempixel.com/400/400/"); 
    } 
}