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/");
    }
}

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

1 个答案: