网站导航
组件

媒体

以教学色调呈现原创图像，并保留真实图片的固有尺寸。

以色调呈现图像

tone="neutral"
tone="blue"
tone="violet"

真实图片

Sun above layered mountains

Reset the float when the image should return to normal document flow. The image keeps its intrinsic ratio at every width.

Text wraps around the floated image and continues in the remaining inline space.

使用于 响应式设计指南.

用法与接口

未提供 src 时，DemoMedia 会在面板上以内联 SVG 绘制网站的山景图像，并由 tone 提供的 currentColor 着色。提供 src 和 alt 时，则使用网站的 Image，并传入固有 width 和 height。

<DemoMedia tone="blue" className="w-full h-auto" aria-label="Blue mountain illustration" /><DemoMedia src="/demo/landscape.svg" alt="Sun above layered mountains" width={320} height={200} />

组件不会额外添加布局设置；尺寸、圆角和 float 由示例决定。