Question

我想根据显示尺寸显示不同的图像尺寸。例如，在手机显示屏中，我想显示

/imageController/myimage/width/100

和

/imageController/myimage/width/1000

在一个大屏幕上。

这是可能的还是我需要先使用jQuery来检测屏幕大小？

非常感谢。

（不要失去你的XP点，而不是这个问题。如果我发现它没用，我会删除它）

Answer 1

您是否考虑过简单地使用CSS和CSS媒体查询来指定图像的内容，然后在屏幕尺寸低于CSS媒体查询中指定的阈值时更改图像的内容。

如果查看bootstrap.css，您会发现该框架已经实现了许多CSS媒体查询。

我整理了一个快速测试，在Chrome和IE中完美运行。

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <style>
        #my-image { content:url("[insert path to your full size image]"); }
        @media screen and (max-width: 640px) {
            #my-image { content:url("[insert path to your small size image]"); } /* Once the screen drops below 640px, the new image will show */
            img { border: solid 4px #000; }  /* I'm apply some an additional border to help illustrate when the screen width is below 640px */
        }
    </style>
</head>
<body>
    <img id="my-image" />
</body>
</html>

＆＃13;

重要提示 您需要修改＆＃39;内容：网址＆＃39;为了使上面的代码片段能够运行。

这是另一个讨论这种方法的Stack Overflow帖子：Switching CSS classes based on screen size

我希望这会有所帮助。

是否可以根据引导程序中的屏幕大小选择图像？

1 个答案: