No.4ベストアンサー
- 回答日時:
上下の位置が同じというのを、考え方を変えてみてください。
つまり、「高さが同じ」
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
- 回答日時:
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
- 回答日時:
ホームページじゃないでしょうが---(^^)→ホームページという言葉 (
http://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC% … )>見栄えが良くありません。
HTMLは、デザインのためでは決してありません。12年以上前のHTML4.01の勧告以来、強く言われ続けているのに改善される兆しがない。
→2.4.1 構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
→14.1 スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
→11.1 表の概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
あとでじっくり読んでおくこと。
>大きさが違う写真を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
- 回答日時:
どこのラインを合わせたいのですか?
違ったものはすべてあわせようとしても合わないのは分るでしょう。
上を合わせるなら上を基準に、下を合わせるなら下を基準に、
真ん中にしたければセンターに、上も下も合わせたければ、画像の上下を同じにします。
No.1
- 回答日時:
まずHTML上での画像のサイズ変更および画像のテーブル配置はお勧めできません。
本来であれば、画像編集ソフトで画像の解像度と寸法を表示させたい大きさにキチンと調整した上で、テーブル内ではなく、スタイルシートで横並びに配置するべきでしょう。
リファレンスサイトは多種ありますので、お調べになってみてください。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- WordPress(ワードプレス) ワードプレスで、左寄せ画像と文字を横並びにせず、画像の下に文字を表示される方法を教えてください 1 2022/04/24 11:06
- 写真・ビデオ スマホは、auのアンドロイドです。 正月に、干支の兎年のスタンプや画像をダウンロードしました。(10 1 2023/02/03 20:19
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- Visual Basic(VBA) エクセルマクロでアニメを作る方法を教えてください。 1 2023/02/07 14:27
- Windows 10 フォルダ内の全ての画像を矢印キーでスライドできるようにしたい 1 2022/10/21 12:53
- その他(動画サービス) VLCメディアプレーヤーについて 1 2022/11/29 14:19
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- その他(Microsoft Office) 複数の写真を1枚に印刷 5 2023/05/05 22:41
- その他(パソコン・スマホ・電化製品) 圧縮ファイル解像について 7 2023/07/31 08:42
- 写真・ビデオ 写真や動画を保存する、これらを満たしたサービスはありませんか。 ・iOS, Android, Mac 2 2023/07/30 18:35
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画像の場合のみ、下線を消す方...
-
table で画像をピッタリとくっ...
-
HTMLは、シングルクォートかダ...
-
3つの画像を中央に寄せて表示さ...
-
リンクを知らせる手のマークが...
-
HTMLでボタンを横に2つ並べる方法
-
floatさせたdtの内容が多い場合...
-
cssヘッダー画像の下に配置した...
-
画像と背景色の幅が合わない
-
画像の横にテキスト
-
CSSの左横に隙間ができてしまい...
-
htmlで画像を2個ずつ並べていき...
-
Safariの場合HTMLの内容を変更
-
htmlの文字が縦書きになる
-
質問1.
-
タグは大文字と小文字どちらが...
-
Macで画像の切り抜きできないの?
-
CSSがなぜかfont-sizeだけ効か...
-
リストの並べ替え
-
ボタンを横に並べて表示させる方法
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ボタンをセル内一杯に表示させ...
-
リンクを知らせる手のマークが...
-
UDP通信を使うチャットプログラ...
-
ポップアップウィンドウのサイ...
-
プルダウンの選択リストの中に...
-
htmlで画像を2個ずつ並べていき...
-
ホームページビルダーの画像サ...
-
XML画像データををHTMLで簡単に...
-
画像のサイズが変わらない
-
画像の場合のみ、下線を消す方...
-
リンクを選択したときの青い枠...
-
レスポンシブ対応のHTML・CSS(...
-
footerの背景が切れて、背景画...
-
html+CSSのみで作るスライドショー
-
ホームページタグ打ち。サイズ...
-
画像の横に文字をうまく配置で...
-
水面の波紋
-
ホームページで画像を横に並べ...
-
【HTML/CSS】ボタンの枠が伸び...
-
HTMLのIMAGEに。。
おすすめ情報