多媒體圖片
呈現照片、圖片的基本元素。
範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
<div class="ts-image is-small">
    <img src="image.png">
</div>
概要

在沒有指定寬度的情況下,圖片預設會以最寬填滿其父容器為優先。

狀態
停用的

表示這個圖片已經無法互動、不再可用了。

<div class="ts-image is-disabled is-small">
    <img src="image.png">
</div>
外觀
圓角的

使四個角落都變得稍微有點圓角修飾。

<div class="ts-image is-rounded is-small">
    <img src="image.png">
</div>
圓形的

將整張圖片變為圓形,只有在圖片是正方形的情況下才會生效。

<div class="ts-image is-circular is-small">
    <img src="image.png">
</div>
邊框的

使圖片帶有邊框,適合用於白底圖片讓使用者知道其邊界在哪。

<div class="ts-image is-bordered is-small">
    <img src="image.png">
</div>
置中的

水平左右置中一張圖片。

<div class="ts-image is-centered is-small">
    <img src="image.png">
</div>
裁切的

不論是什麼長寬比都不會變形而會自動裁切其內容。

<div class="ts-image is-covered">
    <img src="image.png" style="height: 100px; width: 110px;">
</div>
長寬比的

將圖片以 1:14:316:9 的方式呈現,通常建議與「裁切的」樣式一同使用以避免圖片拉伸。

<div class="ts-image is-1-by-1 is-covered">
    <img src="image.png" style="max-width: 200px;">
</div>
<div class="ts-image is-4-by-3 is-covered">
    <img src="image.png" style="max-width: 200px;">
</div>
<div class="ts-image is-16-by-9 is-covered">
    <img src="image.png" style="max-width: 200px;">
</div>
間隔的

在前或後新增間隔以避免與其他元件相鄰太近。

相較於稱呼自己是間「科技公司」,我們
的運作模式更像是所「學校」。雖然卡莉絲伊繁星提供網際網路服務與電子科技產業的相關產品,但我們更注重人們是否能在開發的過程
中有所收穫並學以致用,而我們也十分地重視一項產品是否能夠達成社會的期許並希望能藉此改變某些人的生活,協助大眾
更向自己的目標邁進;這也正是伊繁星最高協議被創造的原因。
相較於稱呼自己是間「科技公司」,我們
<div class="ts-image is-start-spaced is-mini">
    <img src="image.png">
</div>
的運作模式更像是所「學校」。雖然卡莉絲伊繁星提供網際網路服務與電子科技產業的相關產品,但我們更注重人們是否能在開發的過程
<div class="ts-image is-end-spaced is-mini">
    <img src="image.png">
</div>
中有所收穫並學以致用,而我們也十分地重視一項產品是否能夠達成社會的期許並希望能藉此改變某些人的生活,協助大眾
<div class="ts-image is-spaced is-mini">
    <img src="image.png">
</div>
更向自己的目標邁進;這也正是伊繁星最高協議被創造的原因。
尺寸

圖片比起其他元件有更多的尺寸可供使用,但因為在設計上這些大小並不會剛好符合所有人的需求,若真遇上尺寸不符預期的情況時,請別拘謹地直接手動覆寫其大小吧。

尺寸
35px
80px
150px
300px
450px
600px
800px
960px

<div class="ts-image is-tiny">
    <img src="image.png">
</div>
<div class="ts-image is-small">
    <img src="image.png">
</div>
<div class="ts-image is-medium">
    <img src="image.png">
</div>
在尋找相似的元件嗎?
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n