[HTML][CSS] 画像の高さを揃えるには？

質問

HTML、CSSの書き方について教えてください。
ブロック中に複数の画像を配置し、それらのアスペクト比を変えずに高さを揃えようとしています。

ベースとなるHTMLコードの例：

<div class="photos">
<img class="photo" src="xxx1.jpg">
<img class="photo" src="xxx2.jpg">
<img class="photo" src="xxx3.jpg">
</div>

やりたいこと：
　要件1. <div>内の写真の数によって幅を固定させたい。
　　例：写真が3枚なら、1枚あたりの幅は3/画面幅。
　要件2. <div>内の複数の写真を一番小さい高さの写真に揃えたい。
　　例：写真1の高さ200px、写真2の高さ250px、写真3の高さ100px
　　　　→写真1~3の高さを100pxとしたい。
　要件3. 要件1と2を満たしつつ、画像のアスペクト比は変えたくない。
　　　→幅をベースとして高さを動的にトリミングしたい。
　　　　読み込んだポストによって幅や高さが変わるので、
　　　　css+JavaScriptというよりはHTMLタグに属性を直に書いてできると良い。
　　　　（<div style="xxxxx">とか<img style="yyyy">とか。）

clip:rect()でできるのかもしれないのですが、座標の扱い(position:absolute;)とかがよくわからないです…。

なお、HTML内にて各画像の高さを取得する必要はありません。既に取得済の情報を使います。

何か良い案はありますでしょうか？

この投稿のマルチメディアは削除されているためご覧いただけません。

回答No.2

ORUKA1951 · ベストアンサー

＞このようにすれば画像は切れますがアスペクト比は維持されると考えています。

　いえ、アスペクト比とは画像の縦横比のことですから、トリミングしたらダメなのです。

200(W)×400(H),600×200,300×300
　→300(W)×600(H),300×100,300×300　アスペクト比を変えずに300(W)で統一した場合

200(W)×400(H),600×200,300×300
　→150(W)×300(H),900×300,300×300　アスペクト比を変えずに300(H)で統一した場合

　です。

回答No.1

ORUKA1951

＞HTML内にて各画像の高さを取得する必要はありません。
　の意味がわかりません。

用件が矛盾しています。
　画面幅900で、200(W)×400(H),600×200,300×300とすると、ひとつの画像の幅は300になります。すると、それぞれの画像は300×600,300×100,300×300になります。アスペクト比を変えずに、高さを100にすると、50×100,300×100,100×100になります。これは要件１に反します。

　ポストとありますが、これがformで送信されてくるデータでしたら、CGIでimageMagick(perlMagick)をつかって、一度に送信された画像数にあわせて、規定の画像サイズの枠を決め、その枠に収まるようにアスペクト比を変えないように拡大・縮小して、残りの部分は背景で埋める・・・などの処理をしてサムネイルを作ります。
　また、画像の一辺の長さを決めて他の辺の長さをautoにするとアスペクト比を固定して伸縮できます。

補足

要件が矛盾しているとのこと、情報が足りずに申し訳ありませんでした。

アスペクト比を変えずに、「トリミング」して表示したいのです。

画面幅900で、200(W)×400(H),600×200,300×300とすると、
幅が300、高さがそれぞれ600,100,300となり、一番背が低いものは100となります。
この時、100を超える高さを持つ画像を高さ100の範囲で「トリミング」して画像を表示させたいのです。
（高さ600の画像を高さ100でトリミング＝高さ500分を表示させない。）

このようにすれば画像は切れますがアスペクト比は維持されると考えています。