ブログのサムネイルなど、画像を一覧表示させるときはサイズが統一されていると、きれいに整った印象になります。 しかし、Photoshopなどの画像編集ソフトがない環境では、いちいち画像をリサイズするのも現実的ではありません。 ということで今回は、サイズやアスペクト比(縦横比)がバラバラの画像をCSSでトリミングする方法のメモ。 縦・横・中央それぞれに合わせてトリミングする方法と、トリミングせずにリサイズする方法があるので、ケースバイケースで使い分けるとよいかと。 中央配置してはみ出た部分を隠す 縦・横・中央、何を基準にするにしても、基本的には「中央配置してはみ出た部分を隠す」形でトリミングしています。 中央配置というとpositionとmarginによる指定が一般的ですが、参考ページで紹介されているようにmarginでは画像ごとに数値を指定する必要があるため、今回の場合は不向きです。 そこで