如果图片的宽度大于主要内容列（在较小的屏幕上经常发生），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.
未使用明确类的示例
在此示例中，两个段落都将换行显示在浮动图片旁边。
此段落会环绕浮动图片。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 文字商标 SVG 文件。停用深色主题后，系统会显示 <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 附加到现有图片的文件名后面。