サイトの背景写真をレスポンシブ対応にするとズレてしまう。

初歩的な質問になります。
サイトのファーストビュー部分のロゴを最前の真ん中に、大きな写真を背景におきたいのですが、以下の画像のようにズレていまします。
画像を上手く合わせても、レスポンシブでスマホ版にすると画像が引っ張られ関係ない右の方に大きな余りが出てしまいます。

お助けのほど、よろしくお願いします。

調整ているのですが、一向にうまくいきません。

    <header class="header">
       <div class="main-visual">
            <div class="main-visual-inner">
　　　　<p class="background" ><img src="img/cafe3.jpg"></p>
              <p class="coffee"><img src="img/sakai_coffee2.png" ></p>
            </div>
          </div >
    </header>

.header {
  background-color:#88e2f0;
  width: auto;
  opacity: 1;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  height: 70vh;
}

.background {
  width: 1000px;
  position: absolute;
  margin: auto 0;
  text-align: center;
  opacity: 0.6;
}

以下レスポンシブ


  .header {
    background-color:#88e2f0;
    opacity: 1;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    height: 70vh;
  }
  
  .background {
    max-block-size: auto;
    position: absolute;
    margin: auto;
    opacity: 0.6;
    justify-content: center;
    display: flex;
    height: 70vh;
  }

いろいろ調整しすぎてぐちゃぐちゃになっています。申し訳ございません。

Lhankor_Mhy

2022/07/02 08:35

ご解決でしたら、hatena19さんのご回答をベストアンサーに選んで質問を閉じてください。

行動規範の内容に同意します

回答2件

ベストアンサー

提示のHTMLとCSSでは画像のようにならないので、一般論として回答します。

まず、『大きな写真を背景におきたい』のなら、img要素ではなく、CSSの background-image で設定すれば、position: absolute;で重ねたりなど面倒なことせずにシンプルになります。

ロゴ画像は現状のようにimg要素で、Flextレイアウトで中央配置すればいいでしょう。

あと、レスポンシブに関しては、PCとモバイルの差は幅ぐらいしかないので、わさわざ分けなくても、max-width で最大幅を制限するぐらいでいいでしょう。

ご希望のレイアウトが不明なので、一例としてのコードです。

html
1<header class="header">
2  <div class="main-visual">
3    <div class="main-visual-inner">
4      <img src="img/sakai_coffee2.png">
5    </div>
6  </div >
7</header>

css
1.header {
2  display: flex;
3  justify-content: center;
4  background-color:#88e2f0;
5  cursor: pointer;
6  height: 70vh;
7}
8.main-visual {
9  max-width: 1000px;
10  width: 1000px;
11  height: 100%;
12  text-align: center;
13  background-image: url("img/cafe3.jpg");
14  background-size: cover;
15}
16.main-visual-inner {
17  width: 100%;
18  height: 100%;
19  background: rgba(255, 255, 255, 0.4);
20  display: flex;
21  justify-content: center;
22  align-items: center;
23}

投稿2022/06/30 00:39

総合スコア33715

2022/06/30 15:12

ご丁寧にありがとうございます。調整できそうです。ありがとうございました。

行動規範の内容に同意します

こういうことでしょうか？

サンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/wov5b14k/

css
1        .header {
2            background-color: #88e2f0;
3            width: auto;
4            opacity: 1;
5            margin: auto;
6            display: flex;
7            align-items: center;
8            justify-content: center;
9            cursor: pointer;
10            height: 70vh;
11        }
12
13        .background {
14            width: 1000px;
15            position: absolute;
16            margin: auto 0;
17            text-align: center;
18            opacity: 0.6;
19            margin: auto; /* 追加 */
20            inset: 0; /* 追加 */
21        }
22
23        @media screen and (width<=576px) {
24
25            .header {
26                background-color: #88e2f0;
27                opacity: 1;
28                margin: auto;
29                display: flex;
30                align-items: center;
31                justify-content: center;
32                cursor: pointer;
33                height: 70vh;
34            }
35
36            .background {
37                max-block-size: auto;
38                position: absolute;
39                margin: auto;
40                opacity: 0.6;
41                justify-content: center;
42                display: flex;
43                height: 70vh;
44                max-width: 100%; /* 追加 */
45            }
46        }