アスペクト比
stimeo--aspect-ratio
比率を CSS カスタムプロパティとして供給し、利用側スタイルが比率を保つ。
stimeo--aspect-ratio コントローラは役割も状態も持たない純粋なレイアウト補助で、要求された比率をホスト要素の --stimeo-aspect-ratio カスタムプロパティとして供給する。利用側 CSS は aspect-ratio: var(--stimeo-aspect-ratio)(または padding ハック)で箱を制御できる。値は CSS の比率表記 16/9 と裸の数値を受け付け、w / h に正規化する。解釈できない値は 1 / 1 にフォールバックし、値が変わるたびに反映し直す。ライブラリは振る舞いのみを提供し、実際の描画(aspect-ratio・object-fit・クロップ)は Playground のスタイルシートが担う。
<%# Markup for the aspect-ratio demo.
The library only supplies the ratio Value as the --stimeo-aspect-ratio custom
property; demo.css does the actual ratio rendering
(aspect-ratio: var(--stimeo-aspect-ratio)). %>
<div class="aspect-ratio-demo">
<figure class="aspect-ratio-demo__item">
<div class="ratio-box" data-controller="stimeo--aspect-ratio"
data-stimeo--aspect-ratio-ratio-value="16/9">
<div class="ratio-box__content" data-stimeo--aspect-ratio-target="content">16 / 9</div>
</div>
<figcaption><%= t("components.aspect_ratio.demo.wide") %></figcaption>
</figure>
<figure class="aspect-ratio-demo__item">
<div class="ratio-box" data-controller="stimeo--aspect-ratio"
data-stimeo--aspect-ratio-ratio-value="1/1">
<div class="ratio-box__content" data-stimeo--aspect-ratio-target="content">1 / 1</div>
</div>
<figcaption><%= t("components.aspect_ratio.demo.square") %></figcaption>
</figure>
<figure class="aspect-ratio-demo__item">
<div class="ratio-box" data-controller="stimeo--aspect-ratio"
data-stimeo--aspect-ratio-ratio-value="3/4">
<div class="ratio-box__content" data-stimeo--aspect-ratio-target="content">3 / 4</div>
</div>
<figcaption><%= t("components.aspect_ratio.demo.portrait") %></figcaption>
</figure>
</div>
/* Presentation CSS for aspect-ratio. The library only supplies
--stimeo-aspect-ratio, so this CSS reads it with var() and draws the ratio. */
.aspect-ratio-demo {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
align-items: flex-start;
}
.aspect-ratio-demo__item {
margin: 0;
font-size: 0.85rem;
color: var(--color-text-muted);
display: flex;
flex-direction: column;
gap: 0.5rem;
}
/* Feed the ratio the library supplies straight into CSS aspect-ratio. */
.ratio-box {
width: 200px;
aspect-ratio: var(--stimeo-aspect-ratio);
border: 2px dashed var(--border-interactive);
border-radius: 8px;
background: repeating-linear-gradient(
45deg,
var(--surface-subtle),
var(--surface-subtle) 10px,
var(--surface-subtle) 10px,
var(--surface-subtle) 20px
);
}
.ratio-box__content {
width: 100%;
height: 100%;
display: grid;
place-items: center;
font-weight: 600;
color: var(--color-text);
}
このデモに固有の消費側 JS はありません(挙動はコントローラが担います)。
これらのスタイルは共通のデザイントークン(ライト/ダーク両対応)を使います。 共通スタイルも一緒にコピーし、ルート要素の data-theme を切り替えればダークになります。
このコンポーネントを動かすために HTML へ記述する data-* 属性です。ルート要素に下の data-controller を付け、その内側に各 target / value / action を配置します。
ルート要素に付与
data-controller="stimeo--aspect-ratio"
ターゲット
| 名前 | 説明 | 属性 |
|---|---|---|
content
|
指定したアスペクト比に収める対象要素。 | data-stimeo--aspect-ratio-target="content" |
値(Values)
| 名前 | 説明 | 属性 |
|---|---|---|
ratio
|
適用するCSSの比率(16/9や数値文字列)。既定は1/1で、解釈不能な値はこれにフォールバックする。 |
data-stimeo--aspect-ratio-ratio-value |
状態フック
ライブラリが操作するのはこれらの ARIA / data 属性、カスタムプロパティだけです。見た目は利用側 CSS がこれらに反応して作ります([aria-selected] / [aria-expanded] / var(--stimeo--…) などのセレクタでフックします)。
| フック | 対象 | 意味 |
|---|---|---|
--stimeo-aspect-ratio |
ホスト要素 | 比率(例: 16 / 9)。利用側 CSS が参照する。 |