重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

ヘッダー画像を幅一杯にすると高さが縮小されてしまう

解決済

  • 質問者：momoeolive
  • 質問日時：
  • 回答数：4件

ホームページを作成しています。ヘッダー用に用意した写真をブラウザの横幅いっぱいに表示し、高さも指定したもので表示したいのですが、思うようにできません。ヘッダーの画像サイズはwidth:1800px　height:483pxです。今の状況は横幅は表示サイズをどう変更しても枠いっぱいに表示されてはいるのですが、どういうわけか高さが縮小されて表示されてしまっていて、メイン項目との間が大きく開いてしまっています。

<html>
<head>
</head>

<body>
<div class="headbg"><img src="head_bg.jpg" width="100%" border="0" alt=""></div>
</div>
<div class="main">/* ここからメイン項目が入ります*/
</div>
</body>
</html>

/* CSSは抜粋してこのような状態です*/
html,body { height:100%; }
.headbg { /* ヘッダーを幅いっぱいにする為のボックス*/
width: 100%;
height:483px;
border:0px solid #F00;
position:absolute;
margin:0px;
top:0;
left:0;
overflow:hidden;
}

.main { /* メインボックス*/
height:960px;
width: 900px;
min-width:900px;
background color:#FFF;
padding: 20px 0px 0px 0px;
margin-left:auto;
margin-right:auto;
text-algn:left;
margin-top:290px;
border:0px solid #999;
}

どなた様かどうかご教授頂けませんでしょうか？
どうぞ宜しくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

  • 回答者： naokita
  • 回答日時：

NO.2.3 naokitaです（NO.3の補足拝見済）



メインは、画像と並行して上がるから問題無いのでは？
被るというのは、画像にメインが重なるって事？
--------------------------------------------------
NO.3のソースにて、ヘッダとメインが重なる事は無い。

ヘッダの縦（高さ）が大きくなろうが小さくなろうが、
ヘッダの真下にメインが同じ隙間で並行移動してくれるから被る（重なる）事は無い。
それが、HTMLの仕様だから。

重なるなら、何か別のCSS（前のCSS）が効いているはず。
HTMLだけならブロック要素同士は重ならない仕様。

その原因は、こっち側では検証できないよ。もう一度見直したら解決するはず！
「ヘッダー画像を幅一杯にすると高さが縮小さ」の回答画像4
    • good
    • 0
    • 件
通報する
この回答へのお礼

naokita様、長々とお付き合い頂きまして、本当にありがとうございます！！
CSSのどこかの箇所が効いていて、こちらの考えるデザインとことなるように表示されてしまっているのですね。ヘッダー部分はバッチリ出来ましたので、あとは、もう少し一つひとつをじっくり検討して、不具合を改善したいと思います。未熟な私にご丁寧にお答えくださり、本当に感謝致します！ありがとうございました！

通報する
お礼日時：2011/07/02 08:43

No.3

  • 回答者： naokita
  • 回答日時：

間伸びさせたくないって事ですか？


先の通りで、縦横比を崩すのか？崩さないのか？　それが問題。
質問者さんのやりたい事がどっちか伝わり難いい・・・
（もしくは、それ以外の部分なのか？）
恐らく、
---------
NO.2回答は縦横比が崩れるから、ダメって事で、
だから、縦横比を崩さずに画像を伸縮させて、
画像の縦が縮小された時に、
メインコンテンツも同時に上がれば良い。
---------
↑ そんなイメージですか？　それなら以下で。


/* ■ CSS */
body{ margin:0; padding:0;}
div.headbg {
min-width:900px; /* 要微調整 */
}
.main { /* メインボックス*/
height:960px;
width: 900px;
background color:#FFF;
padding: 20px 0px 0px 0px;
margin-left:auto;
margin-right:auto;
text-algn:left;
border:0px solid #999; /* 不要 or ●px */
}

<!-- ■ HTML DTD標準モードで！ -->
<body>
<div class="headbg">
<img src="head_bg.jpg" width="100%" alt="*">
</div>
<div class="main">
/* ここからメイン項目が入ります*/
</div>
</body>


min-width:900px;　←の値は、最小画像幅を調整/設定する（IE6不可）
画像サイズなんて決まっていませんが、
横幅1800pxの特大画像なんて大き過ぎるでしょ？って事です。

この回答への補足

こんばんは。お世話になっております。やりたい事が遠回りで、本当に申し訳ございません、、、。naokita様のおっしゃる通りで、画像の縦横比は崩さずに画像を伸縮させたいのです。それで、教えて頂いた通り、設定し直してみたところ、バッチリできました！！ただ、この、縮尺を変えた際にmain部分が上にどんどん上がって来てヘッダーとかぶってしまうのは、どうにか回避できないものでしょうか？長々と申し訳ございません。宜しくお願い致します！！

補足日時：2011/06/30 22:51
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： naokita
  • 回答日時：

先日の質問者さんですね！？・・・　こんばんは。

前項の回答者naokitaです。
元ソース提供者なので、
この項に関しては、出来る範囲で今回付き合いますよｗ（都合で遅返信も有
そのかわり、拡張要素があれば明確に・・・
　　　　　　~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
※ 以下の内容を理解出来れば、目的通りに出来ると思うけど。

前回の回答NO.2（今回質問）の手法は、
画像比での伸縮だから横幅を縮めれば、
当然の如く縦幅も比率で小さくなる！
レタッチにしても ↑ ↑ これが一般的！
しかし、
横幅のみ伸縮させるなら縦幅が483pxのままになるから、
例えば、
「車」の画像の横幅だけ小さくしたら
→「チョロＱ」のように車高の高い「潰れた車」になるけど、
その辺を理解しての設定かな？
--------------
更に、前回答はヘッダを疑似背景画像として、
ヘッダにコンテンツを置けるように疑似背景として拡張してあるから、
（一般的なヘッダにしてある。蛇足でしたねｗ）
今回の提示ソースを見る限りでは、
背景画像ではなく、ヘッダ内が<img>画像だけなので、
position、top、left や overflowも全部不要であって、
CSSを利用すせず、
一旦、自作ソースや前回答は忘れて、
何故画像が収縮するのか考えた方が良い！
そうすれば、 jQueryの設定をする前の一番最初の元画像<img>指定に
width="100%" height="483" を追加するだけで良かったはず。


/* ■ CSS */
html,body { height:100%; margin:0; padding:0;}
.headbg {
border:0px solid #F00; /* 不要 or ●px */
}
.main { /* メインボックス*/
height:960px;
width: 900px;
background color:#FFF;
padding: 20px 0px 0px 0px;
margin-left:auto;
margin-right:auto;
text-algn:left;
border:0px solid #999; /* 不要 or ●px */
}

<!-- ■ HTML -->
<body>
<div class="headbg">
<img src="head_bg.jpg" width="100%" height="483" alt="*">
</div>
<div class="main">
/* ここからメイン項目が入ります*/
</div>
</body>

ただし、
こんな面倒な事するより、ヘッダにIMG画像なんて設置せず、
bodyの背景画像としてcenter配置した方が綺麗にもなるかも。
（当然、1800pxなんて特大画像を使わない）
CSS3の background-size: ; を使う手もある。
※ 画像のデザインにもよるから、この辺は何とも言えませんが・・・

※ 当然、margin:auto;なのだから、
HTML,DTDは標準準拠モードにする事。

目的が不明確だと、余計な計算や想定が多くなってしまうだけ・・・
全ての構想（カンプ）が出来ていれば、
出来る範囲で（ブラウザ考慮）最少ソースを考えてコーディングするだけ。
結果論ですが、お互いにかなり難しく考えすぎでしたねｗ

この回答への補足

ご回答ありがとうございます。そして、先日はありがとうございました！独学で作成しているため、間違いだらけで大変ご迷惑をおかけしてしまい、申し訳ございません。
ご説明、よくわかります！そうすると、横に間延びしたようにならないためには、ヘッダーに設置する画像は縦横どのようなサイズにしたらよいのでしょうか？メイン項目はwidth:900pxなので、見せたい画像部分を本当はセンターに配置したいのですが、横幅をいっぱいに表示することを考えると、特大サイズに加工しなくてはいけず、結局、画面を縮小した時には全体のバランスはいいのですが、実際のサイズに変えてみるとイメージしている画像表現とは異なってしまうのです。
もう少し、お付き合い頂けませんでしょうか。宜しくお願い致します。

補足日時：2011/06/30 06:41
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： pai3_14
  • 回答日時：

高さ指定は　埋め込み画像の方に


<img src="head_bg.jpg" width="100%" height="483px" border="0" alt="">
とかでは　マズイのでしょうか？

この回答への補足

ご回答ありがとうございます。今教えて頂いた通りに画像にのみheight指定して親枠には指定なしでしてみたのですが、そうするなぜか高さが間延びしたように膨張して表示されてしまいました。これはどういうことなのでしょうか？

補足日時：2011/06/29 16:49
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報