HTML如何建立分割槽響應圖？

王铁柱6發表於2024-11-25
HTML

要建立分割槽響應式影像，HTML本身並不能直接做到。HTML只是提供影像的結構<img>，而響應式行為需要配合CSS或JavaScript來實現。以下幾種常見方法：

1. 使用srcset和sizes屬性 (推薦)

這是HTML5提供的原生響應式影像解決方案，瀏覽器會根據螢幕大小和解析度選擇最合適的影像源。

<img srcset="image-small.jpg 300w,
             image-medium.jpg 600w,
             image-large.jpg 900w"
     sizes="(max-width: 300px) 100vw,
            (max-width: 600px) 50vw,
            33vw"
     src="image-medium.jpg" alt="My responsive image">
  • srcset: 列出不同大小的影像以及它們的寬度（w描述符）。
  • sizes: 定義影像在不同視口寬度下的尺寸。vw單位表示視口寬度百分比。
  • src: 提供一個預設影像，以防瀏覽器不支援srcset。

2. 使用<picture>元素和source元素

<picture>元素提供更強大的藝術方向控制，可以根據不同的螢幕尺寸或裝置特性顯示不同的影像。

<picture>
  <source media="(max-width: 600px)" srcset="image-small.jpg">
  <source media="(max-width: 900px)" srcset="image-medium.jpg">
  <img src="image-large.jpg" alt="My responsive image">
</picture>
  • <source>: 指定不同的影像源，並使用media屬性設定應用條件。
  • <img>: 作為後備方案，如果瀏覽器不支援<picture>，則顯示此影像。

3. 使用CSS媒體查詢

透過CSS媒體查詢，可以根據視口寬度改變影像的src屬性或背景影像。

<img src="image-large.jpg" alt="My responsive image" class="responsive-image">

<style>
  .responsive-image {
    width: 100%;
  }

  @media (max-width: 600px) {
    .responsive-image {
      content: url("image-small.jpg"); /* 如果是背景圖片 */
      /* 或 */
      /* JS 方法配合修改 src 屬性 */
    }
  }
</style>

<script>
// JS 方法配合修改 src 屬性
window.addEventListener('resize', function() {
  const img = document.querySelector('.responsive-image');
  if (window.innerWidth <= 600) {
    img.src = 'image-small.jpg';
  } else {
    img.src = 'image-large.jpg';
  }
});
</script>
  • 這種方法需要JavaScript配合才能修改src屬性，直接在CSS中修改src屬性不被推薦，因為會產生額外的請求。 背景圖片可以直接在CSS中修改。

總結:

srcset和sizes屬性是建立響應式影像的首選方法，因為它簡單易用且效能良好。<picture>元素適用於需要更精細控制的情況，例如藝術方向。CSS媒體查詢則更適合控制背景影像或配合JavaScript動態修改src。 選擇哪種方法取決於你的具體需求。

記住，為了獲得最佳效能，你應該始終最佳化影像大小並使用適當的壓縮技術。

相關文章