这个问题在这里已经有了答案:
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 非常好,但我无法回答这个问题。有人知道面试官的意思吗?或者什么是正确的解决方案?
最佳答案
你可以通过使用 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了解更多详情。
关于javascript - 根据屏幕分辨率获取图像 [仅通过 HTML],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64712331/