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
|-- another_image_1024x500.png
|-- another_image_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。

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

3 个答案: