画像を縮小するにはどうすればいいのか

Question

<main id="Content">
    <section class="visual">
    <p class="visual-img u-display-pc">
     <img src="2e323de9963411bc8e306a5be7f855ed.jpg">
    </p>
    </section>

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

li {
  list-style: none;
}


body {
    font-family: StoneSansITCPro-Medium,FP-こぶりなゴシック StdN W3,ヒラギノ角ゴ ProN,Hiragino Kaku Gothic ProN,Yu Gothic,YuGothic,メイリオ,Meiryo,sans-serif;
    line-height: 2;
    color: #000;
    letter-spacing: .08em;
    background-color: #fff;
    font-feature-settings: "palt";
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overscroll-behavior-y: none;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: unset
}

body {
  font-size: 1.4rem;
}

.header img {
  width: 110px;
}

 .header-logo {
   text-align: center;
   background-color: pink;
 }


 a {
    color: #000;
    text-decoration: none
}

.header {
  top: 0;
  left: 0;
  z-index: 100%;
  width: 100%;
}

.globalnavi {
  width: 100%;
  position: relative;
}

.globalnavi-level1 {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 10px;
  text-align: center;
}

.globalnav-lebel1-hover {
  padding: 0 15px;

}

.globalnavi-level1-navi {
    position: relative;
    display: flex;
    align-items: center;
    font-family: StoneSansITCPro-Medium,Avenir,sans-serif;
    line-height: 1;
    letter-spacing: .18em;
    cursor: pointer;

}


.globalnavi-for_salon a {
  position: fixed;
  top: 14px;
  right: 2px;
  font-size: 10px;
  font-family: StoneSansITCPro-Medium,Avenir,sans-serif;

}

.visual-img  {
  width: 100%;
}

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

自分のもの

お手本

【やりたいこと】
このように、お手本よりも画像の大きさが大きくなりすぎてしまいます。
画像の縮小方法を教えて頂きたいです。

リンク内容

Comments

[hatena19]

提示のコードだとお手本のように画像全体が表示されてます。
現象の再現できるコードを提示してください。

[sun-chan]

現象の再現できるコードとは、模写しているオリジナルのサイトのコードのことでしょうか？
自分にはコードが複雑でオリジナルのコードのどこの部分が、この画像部分を提示しているのかが分かりません。
申し訳ないのですが、コードを丸々全て提示させていただいても構わないでしょうか？

[hatena19]

最初の画像のような表示になる最低限のコードを提示することです。
現状のコードから関係ないと思われるものを削除していって、一部しか表示されない状態が解消される直前のコードを提示してください。
その場合、直前に削除したコードが原因である可能性が高いと推測できます。

[sun-chan]

コードの方には問題がありませんでした。すみませんでした。
2枚画像をサイトからダウンロードしたのですが、それが上記の「一部しか映っていないもの」と「全体が移っているもの」でした。
自分が使用したのは、間違っていた「一部しか映っていないもの」のためこのような事が起こりました。画像を全体が移る方に差し替えたところ、上手くいきました。お手数をかけさせてしまい、申し訳ありませんでした。
このままのコードで引き続き作成していきます。

[dit.]

「使っている画像自体が違っていた」ということで問題は解消されたということでしょうか？
質問が「受付中」になっているので、ご自身で回答を書き自己解決とし、解決済みにしてください。

[sun-chan]

問題は無事、解決しました。
解決済みにしておきます。

Answer 1

<main id="Content">
    <section class="visual">
    <p class="visual-img u-display-pc">
<!--下記の、URLを正しいものに変更した-->
     <img src="b56d7ca4fc29ca264ff12febce0c6d91-scaled.jpg">
    </p>
    </section>