圖像 SRCSET 為更高 DPR 設備（如 iphone）選擇更大的圖像而不是最近的匹配圖像

Question

我想要達到的目標

斷點	預期圖像寬度
最大寬度 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">

Answer 1

我的理解是 srcset/sizes 允許開發人員使用盡可能高分辨率的圖像，因為 output 設備可以從中受益。

要實現您在這里的目標（忽略 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'); }
/* ... */