Image

画像を装飾するエレメント CSS。

Table of Contents

Basic

  • .image がベースとなります
  • .image 単体に付与されているスタイルはありません
MUSIBii site in dark theme
<img class="image" src="https://i.gyazo.com/a21c7b01996b7640ff84a1d6788135ea.png" width="2400" height="1084" alt="MUSIBii site in dark theme" />

Object Fit

  • 親要素に Box を設置し縦横比を Aspect で指定します
  • .is-contain で画像全体が表示されるように調整されます
  • .is-cover で親要素いっぱいに表示されます
MUSIBii site in dark theme
MUSIBii site in dark theme
<div class="box is-bg-3 is-aspect-3x2 is-flex-0">
  <img
    class="image is-contain"
    src="https://i.gyazo.com/a21c7b01996b7640ff84a1d6788135ea.png"
    width="2400"
    height="1084"
    alt="MUSIBii site in dark theme"
  />
</div>
 
<div class="box is-bg-3 is-aspect-3x2 is-flex-0">
  <img
    class="image is-cover"
    src="https://i.gyazo.com/a21c7b01996b7640ff84a1d6788135ea.png"
    width="2400"
    height="1084"
    alt="MUSIBii site in dark theme"
  />
</div>

Variables

上書きできる変数は以下の通りです。

/* None */

Import

PostCSS で読み込む場合の各パスは以下となります。

@import "musubii/src/elements/image/main.css";