拡大・縮小してもいい感じになる画像
ポートフォリオをつくる中でカードコンポーネントをつくった。こんなやつ。
- Demo - カードコンポーネント | JSFiddle
- 動きを記録した動画 - 拡大・縮小してもいい感じになる画像 | YouTube
このカードコンポーネントの中でサムネイルの画像サイズを指定してるんだけど、ウィンドウサイズを拡大・縮小したときに左右上下に余白が空かないのが良くできたポイントかなと思ってる。
デモの中で画像サイズを指定してるのは以下のコード。比率の指定は height: calc(100vw * var(--ratio))
の部分。ウィンドウの幅 100vw
に対して、適当に決めた比率 var(--ratio)
( 0.618
)をかけ合わせている。Flexbox で子要素の画像をコンテナーの中央に配置して、overflow: hidden
でクリップしている。子要素の画像はサムネイルの高さ 100%
に一致するようにしている。( ...いるかなこの説明)
.card__thumb { display: flex; align-items: center; justify-content: center; flex-shrink: 0; height: calc(100vw * var(--ratio)); overflow: hidden; } .card__thumb__image { height: 100%; }