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

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 标签，而使用带有背景图像的divs。但如果你坚持使用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。