image - 使用图片 HTML 元素更改为具有惰性大小的纵向或横向视图图像的右 src 低分辨率占位符

Question

最近我正在阅读有关网页设计中的艺术方向的内容，并试图提高我对响应式图像的了解。到目前为止，我阅读了有关图片 HTML 元素的文章，source 和 img 元素如何在图片元素中工作，以及一些关于lazysizes.js 的教程。

我总体上抓住了这个想法，但不确定两件事；所以，如果我不需要艺术指导并且只关心加载具有适当大小的相同图像，img 标签就足以得到我们想要的。但是，如果我们想为横向和纵向视口定义特定的图像，我们需要使用图片 HTML 元素。我很好奇的是，当我查看在 img 中的 srcset 属性中定义的图像名称时，我发现我们只给出了 320w、480w 之类的宽度信息。浏览器是否检查图像的纵横比并拒绝加载具有不同纵横比的图像？或者我们可以只在同一个 img 标签中提供纵向和横向框架图像，并使用媒体查询使用 CSS 进行调整，这将允许我们仅使用 img 元素进行艺术指导？是什么让艺术指导必须使用图片元素？

我的第二个问题是，假设我使用图片 HTML 元素为移动设备和桌面定义不同的图像，同时使用惰性大小。

据我了解，在图片元素中，我们只定义了一个 img，我应该在其中加载我的低质量占位符图像。但是由于我在 datasrc 集中同时具有纵向和横向视图，我如何告诉浏览器或惰性大小在桌面时在 img 中加载横向占位符，而在移动设备时加载纵向视图占位符图像？因为，我假设，因为我们只能定义一个带有 src 属性的 img 来定义我们的低质量占位符图像，所以我只能选择纵向或横向框架图像，如果浏览器选择另一个框架选项，这看起来会有点奇怪最合适的形象。我错了，还是我迷失在有关该问题的所有信息轰炸中？

提前致谢

标签： imagelazy-loadingresponsive-images

Answer 1

对纵向和横向使用不同的图像可能不是一个好方法。最后，在延迟加载之后，将加载一个图像 src，如果用户旋转设备并从纵向转到横向，他将看不到正确的图像。

有一个选项可以创建两个容器 - 一个用于纵向，一个用于桌面，并使用 CSS 媒体查询 ( https://caniuse.com/mdn-css_at-rules_media_orientation ) 为适当的容器显示无/块。在每个容器中，您可以延迟加载正确的图像。不利的一面是，将加载 2 张图像。