问题描述
我有一个可横向滚动的网页布局，我想在其中显示各种尺寸的图像，其高度为视口高度的50％（因此，它们产生的宽度将有所不同）。
为此，我想使用响应式图像，这样用户就不必加载不必要的大图像。但是，整个srcset / sizes基础结构似乎在某种程度上已经进行了优化，以根据图像的宽度（相对于视口的宽度）来检索图像，因此，我很难将这一原理转换为使用高度。 / p>
首先，我尝试将w中使用的srcset替换为h，看看哪里能找到我：
<img
src="my_img.jpg"
srcset="my_img_576.jpg 576h,my_img_1024.jpg 1024h,my_img_1280.jpg 1280h"
>
这不起作用，浏览器似乎总是选择最大的（原始）图像，因此srcset似乎被忽略了，这使我相信h是无效的语法。 / p>
接下来，我尝试计算PHP中三个高度中每个高度的每个图像的图像宽度，并将它们插入到srcset中，因此使它们都与宽度一起工作。生成的HTML看起来像这样（对于原始尺寸为1920×1276px的图像）：
<img
src="my_img.jpg"
srcset="my_img_576.jpg 867w,my_img_1024.jpg 1541w,my_img_1280.jpg 1926w"
>
尽管这会开始拾取响应图像，但它确实（如预期的那样？）没有选择正确的图像，因为浏览器尚无图像显示的大小。因此，它可能选择1280px高度中的一个，而1024px中的高度就足够了。
因此，我尝试添加sizes属性以与浏览器进行通信，以显示图像的大小。我尝试过：
<img
src="my_img.jpg"
srcset="my_img_576.jpg 867w,my_img_1280.jpg 1926w"
sizes="50vh"
>
这似乎也不奏效，它选择的图像尺寸对于显示的图像来说太小了。我不太明白其背后的逻辑。
因此，我想到的唯一解决方案是还要通过后端计算一些与每个图像高度步长相对应的最大宽度尺寸（转换为宽度），然后相应地选择图像：
<img
src="my_img.jpg"
srcset="my_img_576.jpg 867w,my_img_1280.jpg 1926w"
sizes="(max-height: 1152px) 867px,(max-height: 2048px) 1541px,(max-height: 2560px) 1926px,1927px"
>
（注意：max-height值必须是图像高度的两倍，因为我需要在视口高度的50％处显示图像。另外请注意，此处显示的视口尺寸有些荒谬，在我的实际代码中，我使用的是不同的值，此处显示的是为了简单起见）
现在，乍一看似乎确实可行。但这似乎是实现似乎简单的事情的一种过于复杂的方法，并且涉及许多我想避免的后端预先计算。另外，我调试该程序很困难，因此甚至不能100％地确定它是否可以可靠地工作。
所以我的问题是：如何更轻松地创建响应式，高度依赖的图像？如果没有更简便的方法，那么我的方法是正确的还是我现在正在忽略某种错误？
谢谢！
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）