HTML CSSで縦横サイズがバラバラな画像を自動トリミングしてサムネイルにしたい

現在メディアサイトの記事一覧ページを制作しているのですが、正方形の画像をタイル上に整列させたようなレイアウトにしたいと考えています。
しかしフリーで落ちている画像は縦横がバラバラで、サムネイルにするためにいちいち手作業でトリミングして。。。というのは骨が折れます。

そこで質問なのですが、画像を常に一定のサイズ（正方形）にトリミングしてくれるようなコード例はないでしょうか。
また、画像の情報量の多い部分（画像の中でもメインの部分）を狙って、そこを中心として自動トリミングしてくれるようなコードもあれば教えてほしいです。

行動規範の内容に同意します

回答4件

CSSで縦横のサイズを調整する方法になります。

lang
1<!doctype html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>test</title>
6<style type="text/css">
7.photo {
8	width:150px;
9	height:150px;
10	overflow:hidden;
11	position:relative;
12	border:1px solid #333;
13}
14.photo img {
15	position: absolute;
16	left: -100%;
17	right: -100%;
18	margin: auto;
19	width: auto;
20	height: 100%;
21}
22</style>
23</head>
24<body>
25<div class="photo"><img src="画像のパス"></div>
26</body>
27</html>

.photo imgをheight:100%にしているので、画像の縦のサイズにあわせています。
width:auto; height:100%;をwidth:100%; height:auto;にすれば、画像の横のサイズにあわせるようになります。
この方法では、縦か横のどちらかにあわせることしかできません。
私の知識ではこの程度しか出来ません。
他に良い方法があれば、調べた結果をフィードバックしていただけると嬉しいです。

投稿2015/05/04 13:48