最近は画像を枠内にぴったり画像をトリミングするデザイン、よく見ます。

縦横トリミング_06

静的に画像を読み込む場合は初めから枠内にはまるサイズに画像を作れば良いけど、仕事としてコーディングをしていると中に入る画像のサイズが分からない場合が多くて、動的に読み込まれた画像が、どんなサイズ・縦横比の画像か分からない場合って結構ある(縦長だったり横長だったり)。

しかもトリミングする画像の中央寄せになるようにしようとすると結構面倒くさい(大抵右端だけになる)。

その上レスポンシブでスマホ表示になった時、レイアウトが変わり画像の外枠の縦横比が変わって隙間ができたり、考え出すと難しくて、ググってもなかなか良いものがなかったので、試行錯誤しているうちにたどり着いた「どんなサイズ・縦横比の画像でも枠内にぴったりトリミングする方法(しかも中央寄せ)」をメモっておきます。

このやり方ですと、ページ内の同じクラス名を探して個別に処理してくれるので、例えばul内のリストの指定クラスのすべてを繰り返し処理で適切なサイズにトリミングしてくれます。

しかも、リサイズのたびに計算をし直すので、レスポンシブデザインでどのデバイスサイズの時でも最適なサイズになります。

HTML
クラス名「photo」(任意)の枠内にどんな縦横比が来るか分からないimgを置きます。(下は繰り返し処理の例えで、別にul>liに入れる必要はないです。)

 

CSS

JS
もちろんjqueryファイルを読み込んでから