画像を拡大・縮小しても繰り返しを防ぐ方法を教えて下さい

前提・実現したいこと

前回の質問にて、繰り返しにならない程度にscalで拡大・縮小をするようにしてなんとかしていました。しかし、それ以上に拡大・縮小するとなると画像が繰り返しになってしまいます。

①やはりbackground-repeat:no-repeat;はbackground-imageでしか使えないのでしょうか？
また、imgタグで画像を挿入した場合には繰り返しを防ぐ方法はないのでしょうか？
（現在の認識はあくまで推測なので確認したいです）

②この記事と同じことを再現しつつ、画像の繰り返しを防ぐ方法が知りたいです。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5 <meta charset="UTF-8">
6 <!-- <meta name="viewport" content="width=device-width,initial-scal=1">-->
7 <meta name="viewport" content="width=device-width,initial-scale=1">
8 <link rel="preconnect" href="https://fonts.gstatic.com">
9 <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;800&family=Noto+Sans+JP&display=swap" rel="stylesheet">
10 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
11 <link rel="stylesheet" href="css/reset.css">
12 <link rel="stylesheet" href="css/style.css">
13
14 <title>上級テイク1</title>
15</head>
16
17<body>
18 <header>
19  <div class="header-wrapper">
20   <div class="header-log">
21    <img src="img/site-logo.svg" alt="" class="site-log">
22   </div>
23
24   <ul class="header-nav">
25    <li class="header-list">
26     <a href="#">
27      <i class="fas fa-bars"></i>
28     </a>
29    </li>
30    <li class="header-list">
31     <a href="#">MENU</a>
32    </li>
33   </ul>
34  </div>
35 </header>
36 <main>
37
38
39  <section id="fv">
40
41   <div class="wrapper">
42    <div class="fv-wrapper">
43     <img src="img/the-honest-company-uM-WXMr0YXc-unsplash.png" alt="" class="fv-img">
44    </div>
45
46    <div class="fv-black"></div>
47    <div class="copy">
48     <p class="sub-copy">デザインで人を笑顔にする会社</p>
49     <p class="company">DIGSMILE INC.</p>
50     <p class="main-copy">DESIGN<br>FOR <br>SMILE.</p>
51    </div>
52
53   </div>
54  </section>
55
56  
57
58 
59
60
61 </main>
62 <footer><small>©2018 DIGSMILE INC.</small></footer>
63</body>
64
65</html>
66

該当のソースコード

CSS
1@charset "UTF-8";
2/*カラーコード*/
3/*mixin*/
4html {
5  font-size: 62.5%;
6}
7html body {
8  line-height: 1.8;
9  font-size: 16px;
10  font-family: "Montserrat", "Noto Sans JP", sans-serif;
11  width: 100%;
12}
13html body img {
14  max-width: 100%;
15  vertical-align: bottom;
16}
17html body h2 {
18  font-size: 3.2rem;
19  font-weight: bold;
20}
21html body a {
22  text-decoration: none;
23  color: #FFFFFF;
24}
25html body section {
26  margin: 0 auto;
27  text-align: center;
28}
29
30/*fv*/
31#fv {
32  position: relative;
33  height: 1367px;
34}
35#fv .wrapper {
36  display: flex;
37}
38#fv .fv-wrapper {
39  text-align: left;
40  z-index: 2;
41}
42#fv .fv-wrapper .fv-img {
43  background-image: url(../img/the-honest-company-uM-WXMr0YXc-unsplash.png);
44  /* background-size: cover;*/
45  background-position: center;
46  object-fit: none;
47}
48#fv .fv-wrapper .fv-img {
49  /*width: 1100px;*/
50  /*height: 640px;*/
51  filter: brightness(60%);
52}
53#fv .fv-black {
54  width: 780px;
55  height: 740px;
56  background-color: #333333;
57  z-index: 0;
58  position: absolute;
59  right: 0;
60  margin-bottom: 120px;
61}
62#fv .copy {
63  z-index: 5;
64  color: #FFFFFF;
65  font-weight: bold;
66  margin-top: 157px;
67  position: absolute;
68  right: 18%;
69  text-align: left;
70}
71#fv .copy .sub-copy,
72#fv .copy .company {
73  font-size: 20px;
74}
75#fv .copy .main-copy {
76  font-size: 7.2rem;
77}
78
79/*レスポンシブ*/
80/*タブレット版*/
81@media screen and (max-width: 1100px) {
82  html body {
83    
84  }
85  html body h2 {
86    font-size: 3.9rem;
87  }
88
89
90
91  /*fv*/
92  #fv {
93    position: relative;
94    height: 1024px;
95  }
96  #fv .wrapper {
97    display: flex;
98    width: 100%;
99  }
100  #fv .fv-wrapper {
101    text-align: left;
102    z-index: 2;
103    width: 65%;
104    overflow: hidden;
105    position: relative;
106  }
107  #fv .fv-wrapper .fv-img {
108    background-image: url(../img/the-honest-company-uM-WXMr0YXc-unsplash.png);
109   
110    object-position: 55% 85%;
111    background-repeat: no-repeat;
112    height: 890px;
113    transform: scale(1.3);
114    
115  }
116  #fv .fv-black {
117    width: 562px;
118    height: 1024px;
119    background-color: #333333;
120    z-index: 0;
121    position: absolute;
122    right: 0;
123    
124  }
125  #fv .copy {
126    z-index: 5;
127    color: #FFFFFF;
128    font-weight: bold;
129    margin-top: 330px;
130    position: absolute;
131    right: 25%;
132    text-align: left;
133  }
134  #fv .copy .sub-copy,
135#fv .copy .company {
136    font-size: 16px;
137  }
138  #fv .copy .main-copy {
139    font-size: 5.6rem;
140    line-height: 53px;
141    margin-top: 10px;
142  }
143
144/
145  }
146 
147
148}
149/*スマホ版*/
150@media screen and (max-width: 767px) {
151
152  /*fv*/
153  #fv {
154    position: relative;
155    height: 1024px;
156  }
157  #fv .wrapper {
158    display: flex;
159    width: 100%;
160  }
161  #fv .fv-wrapper {
162    text-align: left;
163    z-index: 2;
164    width: 76.53vw;
165    height: 86.96vh;
166    overflow: hidden;
167    position: relative;
168  }
169  #fv .fv-wrapper .fv-img {
170    background-image: url(../img/the-honest-company-uM-WXMr0YXc-unsplash.png);
171    object-position: 55% 85%;
172    transform: scale(1);
173   
174  }
175  #fv .fv-black {
176    width: 75.47vw;
177    height: 667px;
178    background-color: #333333;
179    z-index: 0;
180    position: absolute;
181    right: 0;
182 
183  }
184  #fv .copy {
185    z-index: 5;
186    color: #FFFFFF;
187    font-weight: bold;
188    margin-top: 330px;
189    position: absolute;
190    right: 25%;
191    text-align: left;
192  }
193  #fv .copy .sub-copy,
194#fv .copy .company {
195    font-size: 16px;
196  }
197  #fv .copy .main-copy {
198    font-size: 5.6rem;
199    line-height: 53px;
200    margin-top: 10px;
201  }
202
203  }
204

試したこと

①画像をbackground-imageで挿入に変えてみる
→scaleを聞かせることができなくなってしまう

②scaleを繰り返しにならない範囲で調整する
→前回はこれでなんとかなりましたが、今回は厳しいです

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

※ここにないcssに関しては、リセットcssまたはカラーコードやmixinの定義シートのものです。
※コードすべては文字数オーバーで入らなかったため、共通レイアウトと今回の該当箇所のfv以外は極力除いています。ご了承ください
OS:Windows
エディタ:Brackets
ブラウザ:クローム

Daregada

2021/03/06 01:15

提示されているコードでは、img要素で画像を表示しつつ、同じ画像をそのimg要素に対するスタイルで背景画像に指定しています。これは意図的なものですか? そのために同じ画像が複数表示されますが、もしかしてそれを「繰り返し」と表現していますか?

mitrasi

2021/03/06 02:51

なるほどです！試したときにHTMLだけ修正してこちらを修正していなかったようで盲点でした???? お騒がせしました。ありがとうございます！解決済みにしたいのでお手数ですが、ご回答の方に再度投稿いただけますでしょうか？

Daregada

2021/03/06 03:12

アドバイスとしては、「問題が再現される最小限のWebページ」を別途(目的の創作物とは別に)作ってみることをお薦めします。今回ですと、HTMLではheaderやfooterを使わずmainの内容だけに絞り、CSSではメディアクエリを使わずに常に画像を拡大(はみ出た部分は隠蔽)するページを作って、それを自分で見る(あるいは質問文に書く)と、回答が得られやすいでしょう。

mitrasi

2021/03/07 00:01

アドバイスありがとうございます！そうですね、、全コード載せると大変だったので、次はそのように試してみますね