CSS Image Values and Replaced Contentモジュールで定義されるobject-fit
プロパティを使うと、置換要素をそのアスペクト比を保ったまま特定の領域内に収めることができます。
このサンプルは、object-fit: cover
とoverflow: hidden
を組み合わせ、大きさの決まったサムネイルでもアスペクト比が崩れないで写真が表示されるようにしています。
2011年4月現在、object-fit
はOpera 11のみが対応しています。