实现动态宽度,静态高度和DPR意识的响应式图像

对于网站上的每个帖子,都会有一个标题图片.此图像的宽度100vw和高度均为300px.我想通过标签的srcset属性img或完整的picture元素提供此图像的多个版本(此时不确定是哪个,因此这个问题).

使用该srcset属性这样做会很容易:

当我想考虑不同的设备像素比率时出现问题.首先,假设我2x和3x所有列出的图像的版本srcset上面.

假设我有一个2x带有全320px视口的手机(例如iPhone 5).我想要加载浏览器xs_2x.jpg.同样,假设我有1x一个带宽屏显示器的桌面.我想要加载浏览器lg.jpg.

但现在,让我们说我有一个更大的手机,一用一3x,414px-宽视(即iPhone 6加).在这种情况下,我希望我的浏览器加载sm_3x.jpg.但是,我的浏览器可能会加载,sm_2x.jpg因为sm_2x.jpg(1536像素)的宽度更接近手机的宽度(1242像素)而不是宽度sm_3x.jpg(2304像素).这将导致设备上的图像不300px高,从而破坏了网站的要求.

如何实现动态宽度,静态高度,DPR意识的响应图像？