如何根据屏幕尺寸切换网页图片？是否仅需通过CSS实现？

你可以直接在当前页面实现根据屏幕尺寸自动切换图片的需求，既可以用原生HTML标签实现，也可以仅通过CSS实现，无需额外工具或依赖，以下是具体实现方案：

该标签是W3C标准专门为响应式图片切换设计的特性，无需JS、无hack，浏览器会自动匹配当前屏幕尺寸加载对应图片，不会同时加载两张图片浪费流量，现代浏览器全版本支持。
你可以直接替换原有代码即可：

<div class="title-image">
  <picture>
    <!-- 屏幕宽度小于768px时加载移动端图片 -->
    <source media="(max-width: 767px)" srcset="{{ $article->mainImageMobile }}">
    <!-- 屏幕宽度大于等于768px时加载桌面端图片 -->
    <img src="{{ $article->mainImage }}" alt="">
  </picture>
</div>

如果不想调整原有HTML的标签结构，也可以通过CSS实现，有两种可选方式：

方式A：背景图切换（无需修改原有HTML结构） #

把图片改为背景图加载，通过媒体查询切换背景地址：

<!-- 保留原有div结构，移除内部img标签即可 -->
<div class="title-image"></div>

对应CSS代码：

.title-image {
  width: 100%;
  /* 根据图片实际比例调整padding-top值，或者设置固定高度 */
  padding-top: 50%;
  background-size: cover;
  background-position: center;
  background-image: url({{ $article->mainImage }});
}

@media (max-width: 767px) {
  .title-image {
    background-image: url({{ $article->mainImageMobile }});
  }
}

方式B：双图片显隐控制 #

在div内渲染两张图片，通过CSS控制不同断点下的显隐状态，注意该方案会同时加载两张图片，会额外消耗少量流量：

<div class="title-image">
  <img src="{{ $article->mainImage }}" class="title-img-desktop" alt="">
  <img src="{{ $article->mainImageMobile }}" class="title-img-mobile" alt="">
</div>

对应CSS代码：

.title-img-mobile {
  display: none;
}
.title-img-desktop {
  display: block;
}

@media (max-width: 767px) {
  .title-img-desktop {
    display: none;
  }
  .title-img-mobile {
    display: block;
  }
}

内容的提问来源于stack exchange，提问作者user17428261