今まで、ニュースカードのサムネイルなどのコーディングをする時に画像に直接幅や高さを指定して力技でなんとかしてきましたが、簡単にレスポンシブかつアスペクト比も崩さずサムネイルを作成する方法がわかりましたので記録用に記事にします。
目次
このようなカードのデザインはWeb制作の勉強や実案件などで必ず1度は目にしたりコーディングしたことがあるという人も多いのでは？
無理やりカード内に収めようとして幅や高さを指定しちゃうと画像が横や縦に伸びてしまったり画像の大きさやアスペクト比によってカードのスタイルも変わってしまうので厄介ですよね。
こんな感じですね・・・
かなり恥ずかしいですが（笑）今までのわたしのやり方だと画像が縮んじゃってます。
ちなみにアスペクト比を維持する為に
width:100%;
heigth:auto;
を画像に指定した場合だとこうなりますね。
画像素材の大きさによってバラバラになってしまいます。
ではどうやったらきれいに画像を入れられるのかさっそくみていきましょう！
まずはじめに、画像の入れ方を変えます。
私は今までimgタグでやっていましたがbackground-imageで背景に入れたい画像を指定します。
そしてこの背景画像を設定したdivタグにCSSでスタイルを指定していきます。
・background-size: cover;
・background-position: center center;
・padding-top: 56.25%;
この３つを指定することできれいに画像を入れることができます。
ではこの3つの指定を詳しく解説していきます！
画像の縦横比を維持したまま、画面幅いっぱいに表示されるように拡大/縮小してくれます。
画像が水平方向と垂直方向の中央の位置になるように表示されます。
アスペクト比が16:9になるように表示範囲が指定されます。
なぜheightじゃなくpadding-topなのかというと、heightの場合%指定ができず表示範囲の比率維持ができません。
一方paddingの場合は%指定ができるので画面幅が変わってもアスペクト比を常に保ってくれるということになります。
ちなみに比率を4:3にしたいときは75%、3:2にしたいときは66.66%といったように好きな比率で指定可能なので用途に合わせて使用してみてください！
