長辺を100%で画像を縦横中央に配置するCSSさまざまな比率の画像を同じサイズにレイアウトする際に、長辺側を100%として縦横中央に配置するCSSを作成しました。一覧ページのサムネイル画像をレイアウトする時などに役立ちますね!その他に、短辺側を100%として長辺はトリミングするパターンも作成しました。こちらは画像の空きを作りたくない時などに便利です。CSS長辺を100%として縦横中央に配置こちらは4対3で表示される枠で作成しています。'';}短辺が100%表示され長辺はトリミングするこちらは短辺が100%になり長辺はトリミングされる場合のCSSです。横長の画像の場合は短辺となるheightを100%にしてwidhtをautoに、縦長の画像の場合はその逆を指定します。2019.04.12先日重い腰を上げてこのブログもHTTPS化しました。2019.06.29動的な実装を行う際は、HTMLの改修やパーツの使い回しが良く発生しますので、できる限りHTMLは統一させておきたいものです。コメントをキャンセルメールアドレスが公開されることはありません。(20)プロフィール都内在住30代小学生と保育園児の子を持つワーママです。最近やっと保育園の二ヶ所送迎から解放され育児にも少しだけ余裕がもてるようになりました。