nlog

とめどなく流れるよだれ

拡大・縮小してもいい感じになる画像

f:id:namikuguri:20180213002302p:plain

ポートフォリオをつくる中でカードコンポーネントをつくった。こんなやつ。

このカードコンポーネントの中でサムネイルの画像サイズを指定してるんだけど、ウィンドウサイズを拡大・縮小したときに左右上下に余白が空かないのが良くできたポイントかなと思ってる。

デモの中で画像サイズを指定してるのは以下のコード。比率の指定は 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%;
}