IT業界の技術をメモ・情報公開できる

css clamp

登録日:2024-10-08   
css @ms
clamp() 関数を使うと、最小幅と最大幅の間で画像サイズを設定し、動的に幅を調整できます。

img {
width: clamp(200px, 50%, 500px);
height: auto;
}

clamp(200px, 50%, 500px); では、画像の幅が200pxから500pxの間で動的に変化し、画面幅の50%に基づいてサイズが調整されます。
【参照】thanks
https://coliss.com/articles/build-websites/operation/css/css-about-min-max-clamp.html
https://chibasyuta.org/css-clamp-function/

一覧に戻る