Srcset 在智能手机等小型屏幕上获得不同的图像方面答案

【问题标题】：Srcset get different image aspect on small hires screens like smartphonesSrcset 在智能手机等小型屏幕上获得不同的图像方面
【发布时间】：2022-11-20 05:48:41
【问题描述】：

我想在网站上显示横幅。在 4k 屏幕上它应该更大，在智能手机上更小但更高，比如 780x550px

我将图像与这样的 srcset 一起使用

<img src="image.jpg" 
srcset="image-2560x400px.jpg 2560w,
image-1920x450px.jpg 1920w,
image-1024x500px.jpg 1024w,
image-780x550px 780w" 
alt="*" />

不幸的是，大多数智能手机的分辨率都很高，因此它们也在垂直屏幕上使用 1920x450 像素的横幅。

我也尝试使用大小属性和 DPI 方面选项，如 1x 2x 3x。但我不希望视网膜显示器和其他具有高分辨率和水平方向的屏幕显示小而高的图像。

也许我没有完全理解 srcset 和 size 选项。

【问题讨论】：

标签： html css smartphone srcset hidpi

【解决方案1】：

您需要使用媒体查询，它们可以让您根据屏幕大小而不是分辨率添加不同的类： https://www.w3schools.com/css/css_rwd_mediaqueries.asp

然后在那里你可以指定你想要的分辨率和图像的大小。

【讨论】：