背景画像の上にロゴ画像がモバイル版にて伸びてしまう現象を改善するには

Question

いつもお世話になっております。
現在独学でBootstrapを参考してHPを制作しています。
表題の通り、モバイル版にロゴが伸びて表示されます。
モバイル版にPC版の幅と画面の幅を合わせるにはどこに修正したら良いか教授いただきたいです。

■PC版

■モバイル版

  <section id="hero">
    <div class="hero-container">
      <a href="index.html" class="hero-logo" data-aos="zoom-in">
        <img src="assets/img/logo.png" alt=""></a>
    </div>
  </section>

#hero {
  width: 100%;
  height: 100vh;
  background: url("../img/hero-bg.png");
  position: relative;
}

#hero .hero-container {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 0 15px;
}

#hero .hero-logo {
  margin-bottom: 30px;
}

@media (min-width: 1024px) {
  #hero {
    background-attachment: fixed;
  }
}

Comments

[Lhankor_Mhy]

「モバイル版にPC版の幅と画面の幅を合わせる」とのことですが、PC版の幅は900pxぐらいあるのではありませんか？　そうすると、3分の1ぐらいに縮小されますが、構いませんか？

[kumalike]

いつもお世話になっております。
すみません、私の説明の仕方が悪かったです。
PC版からスマホの画面サイズに合わせてどうしたら画像を縮小できるかと知りたかったです。

[Lhankor_Mhy]

なるほど、ご解決されて何よりです。

Answer 1

こちらについて

<img src="assets/img/logo.png" alt="">

の画像が500px - 600pxくらいあるのが原因で起きている現象だと思います。

なので、

#hero .hero-logo img {
  dispaly: block;
  width: 100%;
}

を追加してもらえれば、横幅を超えずに画像の表示を行うことができます。

Comments

[kumalike]

ありがとうございました！大変勉強になりました！