如何从可用尺寸列表中确定适合设备的图像尺寸？答案

【问题标题】：How to determine suitable image size for device from list of available sizes?如何从可用尺寸列表中确定适合设备的图像尺寸？
【发布时间】：2015-09-03 20:44:01
【问题描述】：

对于某件商品，我提供以下尺寸的图片：

[ { "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 中编写函数以根据当前设备、分辨率和方向返回最接近的适当大小？

【问题讨论】：

为什么不直接使用媒体查询？
我需要此功能用于图像平铺布局，图像将在运行时根据确定的大小从服务器查询。
您应该从发布更多代码开始，您的问题不清楚您的需求是什么，我们现在只能猜测。
我还没有开始编码。场景是我必须在平铺/网格布局中列出项目。对于单个项目，API 返回所有上述尺寸的图像 url。我怎么知道从哪个 url 加载特定项目的图像？
我们不是来为您编写代码的，如果您有特定的代码问题，可以咨询，我建议您先研究一下，尽力而为，如果您仍然需要帮助，用相关代码重新发布问题。

标签： javascript angularjs html responsive-design screen-resolution

【解决方案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/");
    }
}

【讨论】：

我将如何处理来自 API 的动态图像 url。
我不知道，您没有在问题中指定。