Html 依赖于视口的响应图像'；s高度

我有一个侧滚网页布局，在这里我想显示不同大小的图像，高度为视口高度的50%（因此它们的宽度会有所不同）

为此，我希望使用响应图像，这样用户就不必加载不必要的大图像。但是，整个

srcset

/

大小

基础结构似乎在某种程度上优化了，可以根据图像的宽度相对于视口的宽度来检索图像，因此我很难将这一原则转换为使用高度

首先，我试图简单地用一个

h

替换

srcset

中使用的

w

，看看这会让我：

这不起作用，浏览器似乎总是选择最大的（原始）图像，因此

srcset

似乎被忽略，这让我相信

h

是无效语法

接下来，我尝试在php中计算三个高度中每个图像的图像宽度，并将它们插入到srcset中，这样所有图像都可以使用宽度。生成的HTML看起来像这样（对于原始尺寸为1920×1276px的图像）：

当它开始拾取响应图像时，它确实（可能如预期的那样？）没有拾取正确的图像，因为浏览器还不知道图像显示的大小。因此，它可能会选择

1280px

height中的一个，而

1024px

中的一个就足够了

因此，我尝试添加

size

属性来与浏览器通信，以显示图像的大小。我试过这个：

这似乎也不起作用，它有时会选择对于显示的图像来说太小的图像大小。我不太明白背后的逻辑

因此，我想到的唯一解决方案是，通过后端计算对应于每个图像高度步长（转换为宽度）的一些最大宽度大小，然后相应地选择图像：

（注意：

max height

值需要是图像高度的两倍，因为我需要以视口高度的50%显示图像。还要注意，此处显示的视口大小有些荒谬，在我的实际代码中，我使用的是不同的值，此处显示的值是为了简单起见）

现在，乍一看，这似乎是可行的。但这似乎是一种过于复杂的方式来实现一件看似简单的事情，并且涉及到很多我希望避免的后端预计算。此外，我在调试时遇到了困难，因此我甚至不能100%确定这是否能可靠地工作

所以我的问题是：我怎样才能更容易地创造出反应灵敏、高度相关的图像？如果没有更简单的方法，我的方法是正确的还是我现在忽略了某种错误

谢谢