質問: [html][css] 画像の高さを揃えるには? html、cssの書き方について教えてください。 ブロック中に複数の画像を配置し、それらのアスペクト比を変えずに高さを揃えようとしています。 ベースとなるhtmlコードの例: ! ! ! やりたいこと: 要件1. 内の写真の数によって幅を固定させたい。 例:写真が3枚なら、1枚あたりの幅は3/画面幅。 要件2. 内の複数の写真を一番小さい高さの写真に揃えたい。 例:写真1の高さ200px、写真2の高さ250px、写真3の高さ100px →写真1~3の高さを100pxとしたい。 要件3. 要件1と2を満たしつつ、画像のアスペクト比は変えたくない。 →幅をベースとして高さを動的にトリミングしたい。 読み込んだポストによって幅や高さが変わるので、 css+javascriptというよりはhtmlタグに属性を直に書いてできると良い。 (とか![]()とか。) clip:rect()でできるのかもしれないのですが、座標の扱い(position:absolute;)とかがよくわからないです...。 なお、html内にて各画像の高さを取得する必要はありません。既に取得済の情報を使います。 何か良い案はありますでしょうか?
回答: >html内にて各画像の高さを取得する必要はありません。 の意味がわかりません。 用件が矛盾しています。 画面幅900で、200(w)×400(h),600×200,300×300とすると、ひとつの画像の幅は300になります。すると、それぞれの画像は300×600,300×100,300×300になります。アスペクト比を変えずに、高さを100にすると、50×100,300×100,100×100になります。これは要件1に反します。 ポストとありますが、これがformで送信されてくるデータでしたら、cgiでimagemagick(perlmagick)をつかって、一度に送信された画像数にあわせて、規定の画像サイズの枠を決め、その枠に収まるようにアスペクト比を変えないように拡大・縮小して、残りの部分は背景で埋める・・・などの処理をしてサムネイルを作ります。 また、画像の一辺の長さを決めて他の辺の長さをautoにするとアスペクト比を固定して伸縮できます。