ホームページタグ打ち。サイズの異なる画像の並べ方。

質問

ホームページ作成についてです。大きさが違う写真を2枚横並びにして表示させたいのですが、横のラインが同じになるようにするにはどうすればいいでしょうか？
テーブル内に画像を表示させるようにしていますが、どちらか片方の画像が大きく表示されてしまい、画像の上と下のラインが2枚の画像でばらばらになってしまい見栄えがよくありません。
どのようにすればいいでしょうか。

回答No.4

神崎 渉瑠（@taloo） · ベストアンサー

上下の位置が同じというのを、考え方を変えてみてください。
つまり、「高さが同じ」

HTMLタグ属性で。

<img src="大きい画像" height="100"><img src="小さい画像" height="100">

スタイルシートで。

<style>
the_image {
height: 100px;
}
</style>
<img src="大きい画像" class="the_image"><img src="小さい画像" class="the_image">

お礼

わかりやすくてとても助かりました。ありがとうございました。

回答No.5

ORUKA1951

no.3ですが、簡単な例を
<div class="photo">
　<p><img src="[URL]" width="240" height="180" alt="">と<img src="[URL]" width="360" height="180" alt=""></p>
</div>
のとき、画像の高さを揃えるなら
div.photo p img{display:inline-block;height:120px;width:auto;}
で高さは同じで縦横比は変わらず伸縮されます。line-heightでテキストの位置も調整できるでしょう。

回答No.3

ORUKA1951

ホームページじゃないでしょうが---(^^)→ホームページという言葉 ( http://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8#.E3.83.9B.E3.83.BC.E3.83.A0.E3.83.9A.E3.83.BC.E3.82.B8.E3.81.A8.E3.81.84.E3.81.86.E8.A8.80.E8.91.89 )

＞見栄えが良くありません。
　HTMLは、デザインのためでは決してありません。１２年以上前のHTML4.01の勧告以来、強く言われ続けているのに改善される兆しがない。
→2.4.1 構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )
→14.1 スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )
→11.1 表の概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )
　あとでじっくり読んでおくこと。

＞大きさが違う写真を2枚横並びにして表示させたいのですが、横のラインが同じになるようにするにはどうすればいいでしょうか？
　質問の意味がわかりづらいのですが、現状はtableを使って配置されているとの事ですので、デフォルトではtableのcell内では、virtical-align:middle--セルの縦方向中央に配置されるはずです。
------------------------------
　■■■　　　　　
　■■■　　■　　テキスト・・　　
　■■■
------------------------------
＞横のラインが同じになるようにするにはどうすればいいでしょうか？
＞画像の上と下のラインが2枚の画像でばらばらになってしまい見栄えがよくありません。
　この二つの文章が矛盾するのですが・・。もしベースラインをそろえたい
------------------------------
　■■■　　　　　
　■■■　　
　■■■　　■　　テキスト・・
------------------------------
　ということでしたら、virticla-align:bottomを指定すれば良いです。

　具体的な回答には踏み込めません。なぜなら文書構造がわからないからです。たとえば、それが画像のリストでしたら
<ul>
　<li><img src="" width="" height="" alt="">
　　<p><img src="" width="" height="" alt=""></p>
　</li>
　<li><img src="" width="" height="" alt="">
　　<p><img src="" width="" height="" alt=""></p>
　</li>
</ul>
のようにマークアップされているわけですし、文章中の画像でしたら
<p>なんたらかんたら<img src="" width="" height="" alt=""><img src="" width="" height="" alt=""></p>
とマークアップされているはずですし・・、表データでしたら
<table>
　<tbody>
　　<tr>
　　　<th></th><th>サムネイル</th><th>大きな画像</th>
　　</tr>
　　<tr>
　　　<th>日光</th><td><img src="" width="" height="" alt=""></td><td><img src="" width="" height="" alt=""></td>
　 </tr>
　</tbody>
</table>
　とマークアップされているはずですし・・

　それがわからないと、どのようにプレゼンテーション(見栄え)を指定すればよいかが答えられないのです。

回答No.2

nitto3

どこのラインを合わせたいのですか？
違ったものはすべてあわせようとしても合わないのは分るでしょう。

上を合わせるなら上を基準に、下を合わせるなら下を基準に、
真ん中にしたければセンターに、上も下も合わせたければ、画像の上下を同じにします。

回答No.1

africanagoya

まずHTML上での画像のサイズ変更および画像のテーブル配置はお勧めできません。

本来であれば、画像編集ソフトで画像の解像度と寸法を表示させたい大きさにキチンと調整した上で、テーブル内ではなく、スタイルシートで横並びに配置するべきでしょう。

リファレンスサイトは多種ありますので、お調べになってみてください。