當屏幕尺寸達到最小寬度375像素時，我需要它將當前圖像文件轉換為桌面圖像。我使用tailwind css作為我的前置處理器。

<img src="images/bg-curve-mobile.svg" />

分辨率切換可以使用srcset和sizes屬性來完成。(然而，這在像素密度為2的顯示器上是無效的。)有關更多信息，請參見MDN文章Responsive images。

<img
  srcset="images/bg-curve-mobile.svg 375w, images/bg-curve-desktop.svg 800w"
  sizes="(max-width: 375px) 375px, 800px"
  src="images/bg-curve-desktop.svg"
  alt="">

雖然這也可以使用JS來完成，但這里有一個有效的css解決方案。您可以將url替換為項目中圖像的文件路徑。

html:

<div class='container'>
  <img />
</div>

css:

img{
  display: block;
  width: 100%; // this makes our image responsive. 
  
  
  content: url(url_pc)
}



@media only screen and (max-width: 375px) {
  body {
    background-color: lightblue;
  }
  img{
    content: url(url_mobile)
  }
}