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

Question

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

1. 您必须在笔记本电脑和台式机上显示的一张大分辨率图像。
2. 您必须仅在手机上显示的一张小图片。

您必须仅在HTML Only的帮助下根据“屏幕分辨率”获取特定图像（这 2 个中的 1 个）。你不应该在 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>

检查这个小提琴以获得更好的结果，只需调整结果窗口的大小。

检查这里的更多细节。