サイズの違う画像の縦横比をキープしつつ、同じサイズで表示するレスポンシブ対応

  • このエントリーをはてなブックマークに追加

画像を縦なり横なりに並べる時、サイズの異なる画像を混ぜると、一つだけ横幅が足りなかったり、画像の高さが違って不格好になったりしてしまいました。

わざわざ同じサイズの画像を使用するルールを決めるのも煩雑なので、異なるサイズの画像を複数表示しても、画像の縦横比率はキープしたまま同じ縦横サイズで見切れて表示させるスタイルの当て方をまとめました。

サンプル

 

(Mariko Godaさん撮影)
元サイズ:640×476

(hiroshi atakaさん撮影)
元サイズ:640×424

元サイズ:3264×2448

二子玉川 タマクーヘン

元サイズ:2448×2448

コード

注意

flexboxの中にあったり、親要素(.thumb)のpaddingに他の値が指定されていると上手く表示されないことがあるので注意が必要です。

  • このエントリーをはてなブックマークに追加

新規サイト制作、サイト修正のご相談

こちらからお問い合わせください。

SNSでもご購読できます。

コメントを残す

フォロー

メールアドレスを記入して購読すれば、更新をメールで受信できます。