質問: 現在メディアサイトの記事一覧ページを制作しているのですが、正方形の画像をタイル上に整列させたようなレイアウトにしたいと考えています。 しかしフリーで落ちている画像は縦横がバラバラで、サムネイルにするためにいちいち手作業でトリミングして。。。というのは骨が折れます。 そこで質問なのですが、画像を常に一定のサイズ(正方形)にトリミングしてくれるようなコード例はないでしょうか。 また、画像の情報量の多い部分(画像の中でもメインの部分)を狙って、そこを中心として自動トリミングしてくれるようなコードもあれば教えてほしいです。
回答: 「HTML上の画像を正方形でサムネイルにしたい」ということでしたら、大きく分けて2通りの方法が考えられます。 * 画像ファイルそのものには手を加えず、ブラウザ側だけで実現する方法 * 画像ファイル自体を加工してサムネイルを生成する方法 いちばん楽な方法としては、画像ファイルを表示するimgにCSSでmax-height、max-widthをかければ、指定した正方形に入るようにできます。