对于 iPhone 等 DPR 较高的设备，图像 SRCSET 选择更大的图像而不是最接近的匹配图像

发布于 2025-01-17 16:06:50 字数 1098 浏览 4 评论 0原文

我想要实现的

断点	预期图像宽度
最大宽度 539	539
最大宽度 767	767
最大宽度 991	991
最大宽度 1199	1199
最大宽度 1440	1440
最大宽度 1920	1920

问题：具有较高 DPR 的设备正在选择更大的图像而不是最接近的匹配图像例如：iPhone 12pro 的屏幕是 1170，因此最接近的匹配图像是 1199，但由于某种原因它下载了 1440 图像。

POC 链接： https://responsiveimagepoc.netlify.app/

我的代码：

<img class="image" style="max-width: 100%;height: auto;" src="images/main.jpg" alt="" width="3840" height="1440"
srcset="images/Mobile539.jpg 539w, images/Tablet767.jpg 767w, images/Medium991.jpg 991w, images/Large1199.jpg 1199w, images/xlarge1440.jpg 1440w, images/default1920.jpg 1920w"
sizes="(max-width:539px)539px, (max-width:767px)767px, (max-width:991px)991px,(max-width:1199px)1199px,(max-width:1440px)1440px,1920px">

原文

What I am trying to achieve

Breakpoints	Expected Image Width
Max-width 539	539
Max-width 767	767
Max-width 991	991
Max-width 1199	1199
Max-width 1440	1440
Max-width 1920	1920

Issue: Devices with higher DPR are choosing bigger images instead of the nearest matching image
example: iPhone 12pro's screen is 1170, so the nearest matching image is 1199 but it downloads 1440 image for some reason.

POC LINK: https://responsiveimagepoc.netlify.app/

My Code :

<img class="image" style="max-width: 100%;height: auto;" src="images/main.jpg" alt="" width="3840" height="1440"
srcset="images/Mobile539.jpg 539w, images/Tablet767.jpg 767w, images/Medium991.jpg 991w, images/Large1199.jpg 1199w, images/xlarge1440.jpg 1440w, images/default1920.jpg 1920w"
sizes="(max-width:539px)539px, (max-width:767px)767px, (max-width:991px)991px,(max-width:1199px)1199px,(max-width:1440px)1440px,1920px">

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

女皇必胜 2025-01-24 16:06:50

我的理解是，SRCSET/尺寸可以使开发人员用作输出设备可以从中受益的高分辨率图像。

为了实现您所在的目标（忽略DPR），您可以使用类似的东西：

.img {
  background-image: url('images/Mobile539.jpg');
}
@media (min-width: 540px) { 
  background-image: url('images/Tablet767.jpg'); }
@media (min-width: 768px) { 
  background-image: url('images/Medium991.jpg'); }
/* ... */

My understanding is that srcset/sizes is there to allow the developer to use as high a resolution image as the output device can benefit from.

To achieve what you're aiming for here (ignoring DPR), you could instead use something like this:

.img {
  background-image: url('images/Mobile539.jpg');
}
@media (min-width: 540px) { 
  background-image: url('images/Tablet767.jpg'); }
@media (min-width: 768px) { 
  background-image: url('images/Medium991.jpg'); }
/* ... */

回复收藏 0 原文

~没有更多了~