如果圖片寬度大於主要內容欄 (通常會發生在較小螢幕上)，DevSite 會自動將圖片限制在欄寬內。不過，如果圖片同時設定 width 和 height 屬性，系統只會調整寬度，導致圖片失真。因此，請勿設定圖片的 height。也就是說，如果圖片載入速度過慢 (導致跳躍)，網頁可能會重新繪製，但這比圖片無法在螢幕上完整顯示要好。
您可以將 class="screenshot" 套用至圖片，為圖片加上邊框，讓圖片與附近文字保持適當的間距。這類圖片通常是指背景為白色的螢幕截圖，否則會在頁面上消失。請勿將其用於不需要此屬性的圖片。
浮動在文字旁
右側的圖片也包含 class="attempt-right"，可在較大螢幕上將圖片浮動至右側，但會在較小螢幕 (平板電腦和更小螢幕) 上強制將圖片以直向版面配置顯示，因此浮動至右側會導致問題。class="attempt-left" 也適用於這項功能。如要同時使用 attempt-left 和 attempt-right，請務必先使用 attempt-left 元素。
浮動圖片的寬度不得超過欄寬的 50%。如果是，系統會重新調整其比例。
<img src="/path/to/image.png" alt="Alert dialog"
class="screenshot attempt-right">
您可以使用相同的類別來浮動其他元素，例如同時包含圖片和標題的 <figure>：
<figure class="attempt-right">
<img src="/path/to/image.png" alt="Alert dialog" class="screenshot">
<figcaption><b>Figure 1</b>: Alert dialog</figcaption>
</figure>
清除浮動文字
如要避免文字在浮動元素周圍換行，並以原始寬度顯示，您可以將 clear 類別新增至浮動元素後方的受影響元素。
<p class="clear">Hello world.</p>
使用 clear 類別的範例
在這個範例中，第二段包含 clear 類別。
這個段落會環繞浮動圖片 。Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
這個段落有一個清晰的類別，且不會包圍浮動圖片。Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
不含 clear 類別的範例
在這個範例中，兩段文字都會在浮動圖片周圍換行。
這個段落會環繞浮動圖片。Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
這個段落會環繞浮動圖片。Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
深色主題圖片
DevSite 提供一小組可套用至圖片的類別名稱，可在啟用深色主題時修改圖片外觀。
圖片變暗
根據預設，SVG 檔案以外的所有圖片在深色主題中會稍微變暗。
如要在啟用深色主題時移除圖片的預設調暗效果，請將 no-filter 類別新增至圖片：
<img src="/path/to/image.jpg" class="no-filter" alt="">
反轉圖片
如果圖片採用黑色或深色單色調色盤，請在圖片中加入 invert 類別，讓圖片在深色主題中顯示為白色/淺色：
<img src="/site-assets/logo-github.png" class="invert" alt="">
針對 _index.yaml 頁面，請將 invert 新增至資料列項目的 classname 欄位：
- items:
- classname: invert
icon:
path: /site-assets/logo-github.png
獨立的深色主題變化版本圖片
如果您想提供只在啟用深色主題時顯示的獨立圖片，請將現有的 <img> 元素包裝在 <picture> 元素中，然後為深色主題變化版本新增 <source> 元素。
在下方範例中，<picture> 元素內有兩個 Google 字標可供使用。停用深色主題時，系統會顯示 <img> 元素中的圖片檔案，並以四種 Google 品牌顏色顯示文字標誌。啟用深色主題後，系統會顯示 <source> 元素中的圖片檔案，其中的字標為全白色，且沒有品牌顏色。
範例
程式碼
<picture>
<source
srcset="/devsite/images/google-dark-theme.svg"
media="(prefers-color-scheme: dark)"
class="devsite-dark-theme"
alt="">
<img src="/devsite/images/google.svg" alt="">
</picture>
附註
由於深色主題是透過功能標記啟用，請注意 <source> 元素的屬性：
<source> 元素必須包含 devsite-dark-theme 類別，為 DevSite 前端提供鉤子，以便根據使用者選取的深色主題選項 (light、dark 或 device) 更新媒體屬性及其值。media 屬性必須在其值中加入 (prefers-color-scheme: dark) 媒體查詢。如果您已在媒體屬性中使用 media 查詢的 <source> 元素，請在現有的媒體查詢中加上 and (prefers-color-scheme: dark)，或是新增一個媒體屬性值為 (prefers-color-scheme: dark) 的 <source> 元素。系統會根據使用者選取的深色主題選項，移除或取代 media 查詢及其值。雖然 srcset 屬性中的深色主題變化版本圖片檔案名稱可以是任何名稱，但建議在現有圖片的檔案名稱後方加上 -dark-theme。