html - 为不同的分辨率使用其他图像

Question

我正在做一个网站，但我有一个问题。我在屏幕的整个宽度上制作了一个滑块，但我想为小分辨率使用较小的图像，为大分辨率使用较大的图像。我的滑块中的图像是用 html 编写的。这可能吗，我该怎么做？

这是我的网站：http ://www.yannickluijten.be

Answer 1

您应该调查 CSS 媒体查询。它们允许您根据浏览器的属性（包括窗口大小）设置特定样式（或导入不同的样式表）。

http://www.w3.org/TR/css3-mediaqueries/

Answer 2

根据您的最新评论，我建议以下解决方案。

像其他答案一样使用媒体查询（尽管这仅受 CSS3 支持）或：

我可能会使用javascript。检测用户的屏幕分辨率，然后根据屏幕分辨率将 src 插入到图像标签中。您可以将分辨率范围映射到 img srcs。

Answer 3

我的建议是取消愚蠢的img标签，而是使用div带有背景图像的 s。但是，如果您坚持使用img标签，我想您可以像这样保存图像：

./
|-- some_image_1024x500.png
|-- some_image_512x250.png
|-- 另一个图像_1024x500.png
|-- 另一个图像_512x250.png
|-- third_image_1024x500.png
|-- third_image_512x250.png
|-- ...

然后为图像标签添加一个特殊类，该类应根据窗口大小更改图像分辨率，例如<img class="width-sensitive" src="images/some_image_1024x500.png" />

然后编写一个 JavaScript 函数来检查窗口大小并执行图像源替换，例如（使用 jQuery 的伪代码）：

// This function is terribly unDRY and ugly but it's just an example
function process_image_sizes() {
    var images = $('img.width-sensitive');

    if($(window).width() > 800) {
        images.each(function(index, element) {
            var src = $(element).prop('src');
            if(/512x250\.png$/.test(src)) {
                $(element).prop('src', src.replace('512x250', '1024x500'));
            }
        }
    }
    else {
        images.each(function(index, element) {
            var src = $(element).prop('src');
            if(/1024x500\.png$/.test(src)) {
                $(element).prop('src', src.replace('1024x512', '512x250'));
            }
        }
    }
}

然后在页面加载时运行该函数一次：

$(function() { process_image_sizes(); });

每当窗口调整大小时：

$(window).on('resize', process_image_sizes);

我希望这会有所帮助。

---

编辑：作为事后的想法，您可能希望默认从小图像开始，然后在调整大小时切换到较大的图像。我仍然建议只使用 CSS。