レシポンシブサイトのヘッダー画像可変

Question

前提・実現したいこと

はじめまして。
レシポンシブサイトで画像が可変せず困っています。
こちらのサイトの過去質問も確認し、実行してみましたが、知識不足のためやはりうまくいきません。
どこが間違っておりますでしょうか。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

html
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport">
.
.
.

<header id="header"> <img src="images/mainImg.jpg" alt="">

css
#header{
position: relative;
overflow:hidden;
width: 100%;
height:568px;

}

#header img{
position:absolute;
width: 100%;
max-width: 100%;
height: auto;
}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

現物を見ていないので何とも言えないのですが、headerの中のimg要素に対して position:absolute を指定しているのが原因ではないでしょうか。この場合img要素に直接絶対配置が適用されてしまいますので、以下のようにimg要素を<div>か何かのタグで囲って、それに対して position:absolute を指定します。

<header id="header">
  <div class="header-img"><img src="images/mainImg.jpg" alt=""></div>
</header>

#header{
  position: relative;
} 

.header-img {
  position: absolute;
}

.header-img img {
  width: auto;
  max-width: 100%;
  height: auto;
}

Comments

[nec0mimi]

ご丁寧に何度もありがとうございます。

無事表示されました！！！
本当にありがとうございました！！！

Answer 2

#header{
  position: relative;
  overflow:hidden;/*この行を消す*/
  width: 100%;
  height:568px; /*この行もいらない*/
}

これで，少なくとも画像の「見切れ」はなくなります
「可変しない」が，どんな状態を指しているのか分かりませんが，見切れのことであるなら，こうしてください

Comments

[nec0mimi]

ありがとうございます！

説明不足で申し訳ございません。
ブラウザのサイズにあった画像に自動的になってほしいのですが、PCでも見切れており、スマホでもPC表示のままなのでほぼ画像が見えない状態です。

情報ありがとうございます！
早速変更してみましたろころ、無事画像の見切れはなくなり、スマホでもきちんと画像が表示されました！！ありがとうございますmm

しかしながら、

　height:568px;

を削除しましたら、ヘッダー画像で次にある　div class〜　以下で書いてある文字が消えてしまう状態です。

height: auto;

と追加してみましたがダメでした。
もしお分りでございましたらご教示何卒よろしくお願いいたします。

[liveasnotes]

>ヘッダー画像で次にある　div class〜　以下で書いてある文字が消えてしまう状態です。

ヘッダーの下に,div要素が隠れてしまうということでしたら，
それはposition:absoluteのせいです（細かいヒントは以下）

- No1026「要素の重なりについて本気出して考えてみた（z-indexとか何とかとか）」
http://no1026.com/archives/104

- @hoto17296「[CSS] z-index とスタックコンテキスト」
https://qiita.com/hoto17296/items/42e62989193504d512c7

つまり，ヘッダーが「宙に浮いている」ので，その下の要素が，
画面上部に詰められている状態と思われます

解決法として

- bodyタグのpaddingを調整する
- 当該要素のmarginを調整する
- ヘッダー自体をposition:fixed;にする

などが考えられます

他にもいろいろやりようはあるので，
Thimble ( https://thimble.mozilla.org/ja/ ) などのオンラインエディタ上で，
小規模のデモサイトをいくつか作成してみることをお薦めします