streamlitを使った画像の配置とその制御方法のサンプルです。
基本的な画像の配置
st.image("media/image/sunshain300.png", caption="朝日を浴びる")
元のサイズは横幅300pxの画像。
デフォルトの設定のままだとそのままのサイズで配置されるが、写真の場合自動的にJPGに変換されて画像が生成されてキャッシュされる。
横幅を指定してリサイズ
st.image("media/image/sunshain300.png", caption="朝日を浴びる",width=200)横幅を200pxに固定する。リサイズされて画像が生成されるので画質に注意が必要。
枠組み（container）の中に配置
with st.container(width="stretch",border=True):
st.image("media/image/sunshain300.png", caption="朝日を浴びる")
可変のwidth=100%の親要素の内側に画像を配置する。
親要素が画像より狭くなってもはみ出ることはなく、画像は縮小される。
枠組み（container）の中に伸縮して配置
with st.container(width="stretch",border=True):
st.image("media/image/sunshain300.png", caption="朝日を浴びる",width="stretch")
同じく可変の親要素の内側に配置して、画像も可変するようstretchの指定が可能。
画像形式を指定して配置
st.image("media/image/sunshain300.png", caption="朝日を浴びる",output_format="PNG")
元画像がPNGの場合、写真と判定されるとJPGへ自動変換されるが、明示的にフォーマットを指定することでPNGとして表示することも可能。
この場合も、画像は生成されてキャッシュされる。
※上記のサンプル画像は全て実行結果をキャプチャしたものです。
