範例
明暗色系
遵循使用者設定
遵循使用者設定
亮色
暗色
縮放
標準
放大
標準
縮小
<div class="ts-image 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-covered">
<img src="image.png" style="height: 100px; width: 110px;">
</div>將圖片以 1:1、4:3、16: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>
更向自己的目標邁進；這也正是伊繁星最高協議被創造的原因。圖片比起其他元件有更多的尺寸可供使用，但因為在設計上這些大小並不會剛好符合所有人的需求，若真遇上尺寸不符預期的情況時，請別拘謹地直接手動覆寫其大小吧。
| 尺寸 | |
|---|---|
| is-mini | 35px |
| is-tiny | 80px |
| is-small | 150px |
| is-medium | 300px |
| is-large | 450px |
| is-big | 600px |
| is-huge | 800px |
| is-massive | 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>