问题描述
最近我正在阅读有关网页设计艺术指导的文章，并试图提高我对响应式图像的了解。到目前为止，我阅读了有关图片 HTML 元素、源和 img 元素如何在图片元素中工作的文章以及一些关于 lazysizes.js 的教程。
我大致了解了这个想法，但不确定两件事；所以，如果我不需要艺术指导，只关心加载相同大小的图像，img 标签就足以得到我们想要的。 但是，如果我们想为横向和纵向视口定义特定图像，我们需要使用图片 HTML 元素。我很好奇的是，当我查看 img 中 srcset 属性中定义的图像名称时，我看到我们只提供了 320w、480w 等宽度信息。浏览器是否检查图像的纵横比并拒绝加载不同纵横比的图像？或者我们可以在同一个 img 标签中提供纵向和横向框架图像，并使用媒体查询对 CSS 进行调整，这将允许我们仅使用 img 元素进行艺术指导？是什么让艺术指导必须使用图片元素？
我的第二个问题是，假设我使用图片 HTML 元素为移动设备和桌面定义不同的图像，同时使用lazysizes。
据我了解，在一个图片元素中，我们只定义了一个 img我应该在其中加载我的低质量占位符图像。但是由于我在 datasrc 集中有纵向和横向视图，我如何告诉浏览器或lazysizes 在桌面时加载横向占位符 img 并在移动设备时加载纵向视图占位符图像？因为，我假设，因为我们只能用 src 属性定义一个 img 来定义我们的低质量占位符图像，所以我只能选择纵向或横向框架图像，如果浏览器选择其他框架选项，这看起来会有点奇怪最合适的形象。是我错了还是我在有关该问题的所有信息轰炸中迷失了方向？提前致谢
解决方法
为纵向和横向使用不同的图像可能不是一个好方法。延迟加载后，最终会加载一张图片 src，如果用户旋转设备并从纵向转到横向，他将看不到正确的图片。
有一个选项可以创建两个容器 - 一个用于纵向，一个用于桌面，并使用 CSS 媒体查询 (https://caniuse.com/mdn-css_at-rules_media_orientation) 为适当的容器显示无/块。在每个容器中，您可以延迟加载正确的图像。缺点是，将加载 2 个图像。