網站導覽
元件

媒體

以教學色調呈現原創圖像，並保留真實圖片的原始尺寸。

以色調呈現圖像

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 由範例決定。