javascript - 根据屏幕分辨率获取图像 [仅通过 HTML]

Question

这个问题在这里已经有了答案:





Load images based on screen size

(7 个回答)



Changing image src depending on screen size

(5 个回答)



The <picture> Element in html5 shows not different images by resize

(2 个回答)


去年关闭。




在最近的一次采访中，面试官问我你有两张图片:

您必须在笔记本电脑和台式机上显示的一张大分辨率图像。

您必须仅在手机上显示的一张小图片。

您必须仅在 的帮助下才能根据“屏幕分辨率”获取某个图像(这 2 个中的 1 个)。仅 HTML .你不应该在 CSS/JS/jQuery 的帮助下做到这一点!
虽然，我的 HTML 非常好，但我无法回答这个问题。有人知道面试官的意思吗？或者什么是正确的解决方案？

Answer 1

你可以通过使用 picture 来做这件事标签。检查下面的这个例子。

<picture>
  <source media="(min-width:465px)" srcset="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823__340.jpg">
  <source media="(min-width:600px)" srcset="https://webneel.com/wallpaper/sites/default/files/images/08-2018/3-nature-wallpaper-mountain.jpg">
  <img src="https://cdn141.picsart.com/297499064115201.jpg?type=webp&to=crop&r=256" alt="Flowers" style="width:auto;">
</picture>

检查这个 fiddle为了获得更好的结果，只需调整结果窗口的大小。
检查它 here了解更多详情。