画像を目標の通りに配置したい

Question

前提・実現したいこと

画像(女性と赤ちゃんの写真)を目標のように配置したいです。
最初は幅や高さをpxで指定していましたが、vwやvhで指定しようとすると画像の位置がずれたりしているようです。
スマホ版に関してはタブレット版が崩れる前はできていたのですが、タブレット版に戻ると崩れていたので修正を加えたところ、またスマホ版に戻るとスマホ版も崩れていました。
私の考えでは、タブレット版の幅を修正したりしたためにスマホ版も基準がまた変わり崩れたのかと考えています。

2～3日くらい幅ができたら画像の拡大具合が崩れたり、拡大具合をいじったら幅が崩れたりと試行錯誤を重ねましたが、なかなか解決できず困っています。ご教授よろしくお願い致します。

vwやvhの参考にはこちらを参考にしました。
例えばスマホが[375×667]の場合は、全体の幅を[375px]、要素の幅（今回だと該当の写真）を[287px]と入力し、出てきた[76.53vw]をwidthとして設定。
というようにやっています。

該当のソースコード

 <section id="fv">

   <div class="wrapper">
    <div class="fv-wrapper">
     <img src="img/the-honest-company-uM-WXMr0YXc-unsplash.png" alt="" class="fv-img">
    </div>

    <div class="fv-black"></div>
    <div class="copy">
     <p class="sub-copy">デザインで人を笑顔にする会社</p>
     <p class="company">DIGSMILE INC.</p>
     <p class="main-copy">DESIGN<br>FOR <br>SMILE.</p>
    </div>

   </div>
  </section>

該当のソースコード

/*fv*/
#fv {
  position: relative;
  height: 1367px;
}
#fv .wrapper {
  display: flex;
}
#fv .fv-wrapper {
  width: 76.39vw;
  text-align: left;
  z-index: 2;
}
#fv .fv-wrapper .fv-img {

  background-position: center;
  object-fit: none;
  filter: brightness(60%);
}
#fv .fv-black {
  width: 780px;
  height: 740px;
  background-color: #333333;
  z-index: 0;
  position: absolute;
  right: 0;
  margin-bottom: 120px;
}


/*fv　タブレット*/

@media screen and (max-width: 1100px) {
  #fv {
    position: relative;
    height: 1024px;
  }
  #fv .wrapper {
    display: flex;
    width: 100%;
  }
  #fv .fv-wrapper {
    text-align: left;
    z-index: 2;
    width: 30vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
  }
  #fv .fv-wrapper .fv-img {
    transform: scale(1.4);
    top: 0;
  }
  #fv .fv-black {
    width: 73.18vw;
    height: 100vh;
    background-color: #333333;
    z-index: 0;
    position: absolute;
    right: 0;

  }}

/*fv スマホ版*/
@media screen and (max-width: 767px) {
  #fv {
    position: relative;
    height: 100vh;
  }
  #fv .wrapper {
    display: flex;
    width: 100%;
  }
  #fv .fv-wrapper {
    text-align: left;
    z-index: 1;
    overflow: hidden;
    position: relative;
  }
  #fv .fv-wrapper .fv-img {
    object-position: top;
    transform: scale(1);
  }
  #fv .fv-black {
    width: 75.47vw;
    height: 667px;
    background-color: #333333;
    z-index: 0;
    position: absolute;
    right: 0;
    /*margin-bottom: 80px;*/
    /* margin-bottom: 120px;*/
  }
}

試したこと

①pxで指定してみる
→最初はpxだけだったのでできていたようですが、vwが混在するためかできないところだけ直しても特に変化がないように見えます。

②検証ツールを見ながら、該当箇所のものをひとつずつ指示を消してみて、どこを触ったら目標の配置になりそうか試してみる

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

OS:Windows
エディタ:Brackets
ブラウザ:クローム

目標（上から、タブレット版、スマホ版）

現状（上から、タブレット版、スマホ版）

現状コード

@charset "UTF-8";
/*カラーコード*/
/*mixin*/
html {
  font-size: 62.5%;
}
html body {
  line-height: 1.8;
  font-size: 16px;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  width: 100%;
}
html body img {
  max-width: 100%;
  vertical-align: bottom;
}
html body h2 {
  font-size: 3.2rem;
  font-weight: bold;
}
html body a {
  text-decoration: none;
  color: #FFFFFF;
}
html body section {
  margin: 0 auto;
  text-align: center;
}
/*ヘッダー*/
header {
  position: absolute;
  width: 100%;
  /*共通部とここでwidth:100pxで広がる*/
  z-index: 10;
}
header .header-wrapper {
  padding: 30px 58px;
  display: flex;
  justify-content: space-between;
}
header .header-wrapper .header-nav {
  display: flex;
}
header .header-wrapper .header-nav .header-list {
  padding-right: 7px;
}

/*fv*/
#fv {
  position: relative;
  height: 1367px;
}
#fv .wrapper {
  display: flex;
}
#fv .fv-wrapper {
  width: 76.39vw;
  text-align: left;
  z-index: 2;
}
#fv .fv-wrapper .fv-img {
  background-position: center;
  object-fit: none;
  filter: brightness(60%);
}
#fv .fv-black {
  width: 780px;
  height: 740px;
  background-color: #333333;
  z-index: 0;
  position: absolute;
  right: 0;
  margin-bottom: 120px;
}

/*レスポンシブ*/
/*タブレット版*/
@media screen and (max-width: 1000px) {
  html body h2 {
    font-size: 3.9rem;
  }

  /*ヘッダー　タブレット*/
  header .header-wrapper {
    padding: 30px 30px;
    display: flex;
    justify-content: space-between;
    height: 20px;
  }
  header .header-wrapper .header-log .site-log {
    height: 20px;
  }
  header .header-wrapper .header-nav {
    display: flex;
  }
  header .header-wrapper .header-nav .header-list {
    padding-right: 7px;
  }

  /*fv　タブレット*/
  #fv {
    position: relative;
    height: 1024px;
  }
  #fv .wrapper {
    display: flex;
    width: 100%;
  }
  #fv .fv-wrapper {
    text-align: left;
    z-index: 2;
    width: 78.13vw;
    height: 86.94vh;
    overflow: hidden;
    position: relative;
  }
  #fv .fv-wrapper .fv-img {
    transform: scale(1.4);
  }
  #fv .fv-black {
    width: 73.18vw;
    height: 100vh;
    background-color: #333333;
    z-index: 0;
    position: absolute;
    right: 0;
    /*margin-bottom: 80px;*/
    /* margin-bottom: 120px;*/
  }
}
/*スマホ版*/
@media screen and (max-width: 767px) {
  html body h2 {
    font-size: 2.8rem;
    width: 44.8vw;
  }

  /*ヘッダー*/
  header .header-wrapper {
    padding: 15px 19px;
    display: flex;
    justify-content: space-between;
    z-index: 10;
  }
  header .header-wrapper .header-log {
    width: 189px;
    height: 20px;
  }
  header .header-wrapper .header-nav {
    display: flex;
  }
  header .header-wrapper .header-nav a {
    font-size: 1.2rem;
  }
  header .header-wrapper .header-nav .header-list {
    padding-right: 7px;
  }

  /*fv*/
  #fv {
    position: relative;
    height: 100vh;
  }
  #fv .wrapper {
    display: flex;
    width: 100%;
  }
  #fv .fv-wrapper {
    text-align: left;
    z-index: 1;
    overflow: hidden;
    position: relative;
width:76.53vw;
  }
  #fv .fv-wrapper .fv-img {
    object-position: top;
    transform: scale(1);
  }
  #fv .fv-black {
    width: 75.47vw;
    height: 667px;
    background-color: #333333;
    z-index: 0;
    position: absolute;
    right: 0;
  }
}

Comments

[Lhankor_Mhy]

メディアクエリは使わないのですか？

[mitrasi]

すみません????メディアクエリは使用しております。
SCSSで書いているものをcssからとってきたので失念しておりました。すぐに修正致します。

[Lhankor_Mhy]

ご提示のコードを試してみましたが、スクリーンショットのようなレイアウトにはなりませんでした。
ご提示いただいていない部分に原因があると思われます。

[mitrasi]

すみません全文だと文字量オーバーで投稿できないようなのですがどのようにしたらよいでしょうか？
コードだけを載せるトピック立てるとややこしくなるでしょうし、、

[Lhankor_Mhy]

>最も良いのは、現象を再現するためのミニマムなプログラムを改めて作ることです。そうすれば、貴方自身が現象と問題をより良く理解することにもつながるからです。

ソースコードを書きましょう
https://teratail.com/help/question-tips#questionTips3-5-1

---

「現象を再現するためのミニマムなプログラム」をどうやって作るかですが、たとえば、以下の様な手順はどうですか？

①　HTMLからフッターを削除してみて、それでも問題が再現するかどうか確認する。
②　①で問題が再現しないのであればフッターに原因がある可能性があるので、フッター以外を削除してみる。 以下、①に戻って別の部分を削除するを繰り返す。
③　①で問題が再現するのであればフッターは関係ないので「現象を再現するためより小さいプログラム」ができたことになる。以下、①に戻って別の部分を削除するを繰り返す。

[mitrasi]

情報ありがとうございます。
早速最低限不要な個所までは減らして再掲いたしました。
どうぞよろしくお願い致します。

Answer 1

コードからスクリーンショットが再現できないため、具体的な回答はできません。
とりあえず、一般論的な回答をします。

---

例えばスマホが[375×667]の場合は、全体の幅を[375px]、要素の幅（今回だと該当の写真）を[287px]と入力し、出てきた[76.53vw]をwidthとして設定。

それは間違っていなさそうですが、そのサイズ指定をPC用（1100px超）に設定しているのが原因ではないでしょうか。（値も微妙に違っているし）

/*fv*/
#fv .fv-wrapper {
    width: 76.39vw;
}

/*fv　タブレット*/
@media screen and (max-width: 1100px) {
    #fv .fv-wrapper {
        width: 30vw;
    }
}

/*fv スマホ版*/
@media screen and (max-width: 767px) {
    #fv .fv-wrapper {
    }
}

質問の追記に合わせて追記

とりあえず、高さが足りない件については、高さを指定してみてはどうでしょうか。

#fv .fv-wrapper .fv-img {
    height: 100%;
}

Comments

[mitrasi]

ご回答ありがとうございます！
一応タブレットを1000pxに落としてみました。
間違っている値というのは「width:30vw」でしょうか？
どちらも改めてみて状況は変化しましたが、目標とはまだ違ようです。

[Lhankor_Mhy]

いえ、そもそも 76.53vw という値がないですよね？

[mitrasi]

申し訳ありません。
widthを設定して試してみても効かなかったので削除していました。
戻して加えてみましたがやはり目標にはなりませんでした。

[Lhankor_Mhy]

まあ、一般論の回答であって、解決策ではないですからね。
試行錯誤するしかないと思いますよ。

[mitrasi]

かしこまりました。
ご教授ありがとうございました。

[mitrasi]

ご回答ありがとうございます！
試してみたところ、height:100%は変わらずでした。。

[Lhankor_Mhy]

当方の環境では高さが変わりましたので、ご提示いただいていない部分に原因があると思われます。

[Lhankor_Mhy]

解決されませんか？

当方では、高さを広げることができています。
サンプルをご提示しますね。
https://jsfiddle.net/Lhankor_Mhy/8zsx0bw1/

[mitrasi]

サンプルのご提示ありがとうございます。
先日いじっていて、たまたま形だけはできたけれど、相変わらず原因はわからなかった状況でした。
しかし、ご提示いただいたサンプルと今までのご教授を受けて、照らし合わせて確認をするとやはり原因は「fv-img:100vh」だと判明しました。
おかげさまで無事解決しました。ありがとうございます。

[Lhankor_Mhy]

ご解決されて何よりです。

解決したのであれば、自己解決かBAの選出をしてください。

[Lhankor_Mhy]

ご対応ありがとうございます。
その内容であれば、当方の回答は役に立たなかったでしょうから、自己解決の方がよかったのでは……

[mitrasi]

そんなことないです！直せたのはたまたまですが、Lhankor_Mhy様の「height:100vh」が原因ではないかとのご教授と、サンプルのご提供のおかげで照らし合わせて確認ができましたので！
本当にありがとうございました！