Web ページで、画像のコレクションをレンダリングしています。一部の画像は縦向きで、一部は横向きで、すべて目的のレンダリング サイズより大きくなっています。
これらの画像を、きれいで均一なサイズの正方形のサムネイルのギャラリーに表示したいと考えています。
CSSだけを使用してどうすればよいですか？
可能であれば、javascript ライブラリは避けたいと思います。表示する画像の一部を選択する必要はなく、中央の正方形の領域だけを選択します。
この質問が他の場所で尋ねられたのを見たことがありますが、すべての向きで機能すると思われる回答をまだ見つけていません (たとえば、ポートレートは正しくトリミング/サイズ変更されますが、ランドスケープはそうではありません)。
サーバー側のテクノロジーを使用して、cURL を介して画像のサイズを変更することもできます。しかし、それはあちらこちらでもありません。理解しておくべきことの 1 つは、CSS は実際にはプログラミング言語ではないということです。つまり、CSS は決定を下したり、実際の計算を行うことができないため、CSS だけでは動的な決定を下すことができません。
そうは言っても、ギャラリーの div を作成し、CSS を使用して背景画像を目的の画像に設定できます。CSS3 には というプロパティがありますbackground-size。手動でサイズをピクセル単位で設定できますが、その方法では縦横比が維持されないため、見栄えが悪くなります。を設定するbackground-size: coverと、余分な部分を切り取って背景領域を完全に埋めるように画像がスケーリングされます。設定background-size: containにより、元の縦横比を維持し、画像を切り取ることなく背景を塗りつぶすように画像がスケーリングされます。これは、その使用方法を説明する小さなコードです。jsフィドル
編集: このソリューションは IE9+ でのみ機能することを忘れていました (FF、Chrome、および Safari では正常に機能するはずです)。