html - 如何在不同屏幕尺寸的 HTML 代码中更改图像文件名？

Question

如何在不同屏幕尺寸的HTML代码中更改图片名称？

例如我想做喜欢

如果屏幕是 max-width:1024

<img src="sample400X400.jpg>

如果屏幕是 max-width:min-width:1900px

<img src="sample800X800.jpg>

可以吗

Answer 1

您可以使用 media-queries 在 CSS 中执行此操作或者在 JavaScript 中检测视口(viewport)宽度的变化 ($(window).width();)。

您可以通过监听 onresize 事件来检测视口(viewport)宽度的变化:

$(window).resize(function() {
    ...
});