width:100%;を使って画像を画面幅に合わせたい。

width:100%;を使ってますが、画面幅が広い時(PC表示)には平気なのですが、
画面幅を小さくした時に、画像が画面幅に合わせて縮むのではなく、
画像が切れて表示されてしまいます。

また、2枚目の画像は途中まで小さくなるのですが、
820pxあたりから画像が切れ始めます。

試したこと
width:100%;だと効かないので100vwとしてウィンドウ幅に合わせようとしましたができませんでした
また、メディアクエリを使って細かくwidthをpx単位で区切っても画像が切れてしまいます。

見た資料
https://developer.mozilla.org/ja/docs/Web/CSS/width

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <!--Metaタグ-->
6    <meta charset="UTF-8">
7    <meta http-equiv="X-UA-Compatible" content="IE=edge">
8    <meta name="viewport" content="width=device-width, initial-scale=1.0">
9
10    <!--Bootstrap CSS-->
11    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
12
13    <!--CSS-->
14   <link rel="stylesheet" href="style.css">
15
16   <!--AOS-->
17   <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
18    <!--Fontawesome-->
19    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
20
21    <title>Document</title>
22</head>
23
24<body>
25    <div class="main-visual" data-aos="fade-left" >
26        <div class="visual">
27            <div class="visual-message" data-aos="fade-right" data-aos-delay="1800" >
28            
29            </div>
30        </div>
31    </div>
32  
33      <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
34      <script>
35        AOS.init();
36      </script>
37      <script>
38        AOS.init({
39        offset: 180,
40        delay: 100,
41        duration: 1200,
42        easing: 'ease',
43        once: false,
44        mirror: false,
45        anchorPlacement: 'top-bottom',
46        });
47        </script>
48</body>
49
50</html>

css
1@charset "utf-8";
2   .main-visual {
3       position: absolute;
4       top: 0;
5       left: 0;
6       background-image: url("https://picsum.photos/1200/300") ;
7       min-width: 200px;
8       width: 100vw;
9       height: 100%;
10       background-repeat: no-repeat;
11       background-size: cover;
12   }
13 
14   .visual-message {
15        position: absolute;
16        top:0%;
17        left:0%;
18        background-image: url(./img/mvlogo01.png);
19        min-width: 200px;
20        width: 100vw;
21        height: 100%;
22       background-repeat: no-repeat;
23       background-size: cover;
24    }
25
26

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

回答1件

ベストアンサー

background-size: 100%;ではいかがでしょうか？？

投稿2021/06/05 14:36

hallen0225

総合スコア587

Larkiwing

2021/06/05 14:46

@charset "utf-8"; .main-visual { position: absolute; top: 0; left: 0; background-image: url("https://picsum.photos/1200/300") ; background-size: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; } .visual-message { position: absolute; top:0%; left:0%; background-image: url(./img/mvlogo01.png); background-size: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; } このような感じでしょうか？これだと表示が消えてしまいます。

hallen0225

2021/06/05 14:58 編集

言葉足らずでした。width: 100%（またはwidth: 100vw）は残してください。下記のようにになります。 @charset "utf-8"; .main-visual { position: absolute; top: 0; left: 0; background-image: url("https://picsum.photos/1200/300") ; min-width: 200px; width: 100vw; height: 100%; background-repeat: no-repeat; background-size: 100%; } .visual-message { position: absolute; top:0%; left:0%; background-image: url(./img/mvlogo01.png); min-width: 200px; width: 100vw; height: 100%; background-repeat: no-repeat; background-size: 100%; }

Larkiwing

2021/06/05 15:01 編集

試します。

hallen0225

2021/06/05 15:03 編集

（編集前のコメントに対するコメントです）それは、background-sizeが100%でなくcoverになっているからです。

Larkiwing

2021/06/05 15:08

なるほど。ありがとうございます。 .main-visualの方はなりました。ですが、相対パスで書いた方は前と同じままです。なぜなんでしょう？

hallen0225

2021/06/05 15:11 編集

相対パスの方は、こちらに画像がないので分かりませんが、、 min-width: 200px;が悪さしてませんか？？？