如何从可用尺寸列表中确定适合设备的图像大小

How to determine suitable image size for device from list of available sizes?

本文关键字：图像 列表      更新时间：2023-09-26

对于一个项目，我有以下大小的可用图像:

[ { "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中编写一个函数来返回基于当前设备，分辨率和方向的最接近的适当大小?

下面是一个使用媒体查询的例子: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/");
    }
}
相关文章：