コンポーネント工房：Reflexライブラリ100
·
講座の概要
レイアウト
·
Box
·
Flex
·
Stack
·
Grid
·
Container
·
Section
·
Center
·
Spacer
·
Separator
·
Card
·
Inset
·
Aspect Ratio
·
Fragment
タイポグラフィ
·
Text
·
Heading
·
Link
·
Code
·
Markdown
·
Blockquote
·
Quote
·
Strong
·
Em
·
Kbd
フォーム
·
Button
·
Input
·
Text Area
·
Checkbox
·
Switch
·
Radio Group
·
Select
·
Slider
·
Form
·
Upload
データ表示
·
Badge
·
Avatar
·
Icon
·
Callout
·
List
·
Data List
·
Code Block
·
Progress
·
Spinner
·
Scroll Area
·
Moment
開閉と切り替え
·
Tabs
·
Accordion
·
Segmented Control
オーバーレイ
·
Tooltip
·
Popover
·
Hover Card
·
Dialog
·
Alert Dialog
·
Drawer
·
Dropdown Menu
·
Context Menu
·
Toast
動的レンダリング
·
Cond
·
Match
·
Foreach
·
Auto Scroll
メディア
·
Image
·
Audio
·
Video
表とデータグリッド
·
Table
·
Data Table
·
Data Editor
チャート
·
Area Chart
·
Bar Chart
·
Line Chart
·
Composed Chart
·
Pie Chart
·
Radar Chart
·
Radial Bar Chart
·
Scatter Chart
·
Funnel Chart
·
Treemap
·
Sankey Chart
·
Error Bar
チャートの部品
·
Axis
·
Cartesian Grid
·
Chart Tooltip
·
Legend
·
Label
·
Reference
·
Brush
ほかのチャートライブラリ
·
Plotly
·
Pyplot
HTML要素
·
HTML
·
HTML Text
·
HTML Layout
·
HTML Forms
·
HTML Media
·
HTML Tables
·
SVG
そのほかの道具
·
Theme
·
Skeleton
·
Clipboard
·
Html Embed
·
Script
·
Memo
rx.aspect_ratio公式ドキュメント
工房の注文書
動画サムネイルの枠を16:9の比率で確保し、画面幅が変わってもその比率が保たれるようにしてください。
rx.aspect_ratio は、中身を決まった縦横比で表示します。ratio に幅 ÷ 高さの値を渡すと、与えられた幅に合わせて高さを自動で決めます。サムネイル、動画の枠、地図など、画面幅が変わっても形がゆがんではいけない場所で使います。
rx.box(
rx.aspect_ratio(
rx.center("16:9", background_color="var(--accent-4)", width="100%", height="100%"),
ratio=16 / 9,
),
width="240px",
)プロパティを変えてみる
外側の箱の幅だけを決めれば、高さは ratio が決めます。画像のもとの比率（4:3）と違う比率を選ぶと、object_fit に応じて画像を切り取ったり、余白を残したりします。
プロパティを変えてみる
ratio
1.75
width
fit
rx.box(
rx.aspect_ratio(
rx.image(
src="https://picsum.photos/id/1025/400/300",
width="100%",
height="100%",
object_fit="cover",
background_color="var(--gray-4)",
),
ratio=1.75,
),
width="200px",
)| プロパティ | 値 | 既定値 | 用途 |
|---|---|---|---|
ratio | 数値（16 / 9, 4 / 3, 1） | 1 | 幅 ÷ 高さ。この比率で高さを決める |
中身の width height | "100%" | なし | 比率の箱いっぱいに広げる |
画像の object_fit | "cover" "contain" "fill" | "fill" | 比率の違う画像を切り取るか、余白を残すか、引き伸ばすか |
ratio には、Pythonの式 16 / 9 をそのまま書いてもかまいません（値は1.777…）。
いろいろな比率
公式ドキュメントの例です。同じ幅の中で、比率によって高さだけが変わります。内側の箱に width="100%"、height="100%" を指定して、比率の箱いっぱいに広げています。
rx.grid(
rx.aspect_ratio(
rx.box("Widescreen 16:9", background_color="papayawhip", width="100%", height="100%"),
ratio=16 / 9,
),
rx.aspect_ratio(
rx.box("Letterbox 4:3", background_color="orange", width="100%", height="100%"),
ratio=4 / 3,
),
rx.aspect_ratio(
rx.box("Square 1:1", background_color="green", width="100%", height="100%"),
ratio=1,
),
rx.aspect_ratio(
rx.box("Portrait 5:7", background_color="lime", width="100%", height="100%"),
ratio=5 / 7,
),
spacing="2",
width="160px",
)大きさは外側で決める
aspect_ratio 自体やその中身に width・height をピクセルで直接指定すると、比率が崩れます。代わりに aspect_ratio を rx.box で包んでその箱の幅（または高さ）を決め、中身の幅と高さは "100%" にします。下の例は、幅20%の箱4つに同じ画像を違う比率で入れたものです。画像がゆがまないよう object_fit="cover" を指定しました。
rx.flex(
*[
rx.box(
rx.aspect_ratio(
rx.image(
src="https://picsum.photos/id/237/400/400",
alt="Dog",
width="100%",
height="100%",
object_fit="cover",
),
ratio=ratio,
),
width="20%",
)
for ratio in [16 / 9, 3 / 2, 2 / 3, 1]
],
justify="between",
align="start",
width="100%",
)注文書を仕上げる
外側の箱は max_width まで画面幅に追従し、高さは16:9の比率が決めます。サムネイルの上の再生ボタンは、position="absolute" で真ん中に重ねて置きました。
rx.box(
rx.aspect_ratio(
rx.box(
rx.image(
src="https://picsum.photos/id/1039/800/450",
alt="Waterfall",
width="100%",
height="100%",
object_fit="cover",
),
rx.center(
rx.icon("play", size=28, color="white"),
width="56px",
height="56px",
border_radius="9999px",
background_color="rgba(0, 0, 0, 0.55)",
position="absolute",
top="50%",
left="50%",
transform="translate(-50%, -50%)",
),
position="relative",
width="100%",
height="100%",
border_radius="8px",
overflow="hidden",
),
ratio=16 / 9,
),
width="100%",
max_width="420px",
)工房ノート
rx.aspect_ratio(中身, ratio=16 / 9)で幅 ÷ 高さの比率を固定する。
大きさは外側のrx.boxで決め、中身はwidth・height "100%"。
aspect_ratioや中身に直接ピクセルの大きさを指定しない。
画像はobject_fit="cover"でゆがまないように埋める。
新しい授業・講座のお知らせを受け取る
この講座に授業が追加されたり、続きの講座が公開されたりしたらメールでお知らせします。
R
ReflexKR
触って学ぶPythonとReflex。すべての例はReflex 0.10.0で実際に動かして確認しています。
ReflexKRはバナー広告なし・無料で運営しています。役に立ったら、コーヒー一杯で応援してください。 ☕ コーヒーで応援する
アフィリエイトと支援について© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0
質問と回答
この回について気になることを書き込んでください。すべての言語のページの質問がここに集まります。