レスポンシブ対応の各要素の幅指定について(修正版2)

こんにちは。プログラミング初学者です。

今、レスポンシブとSass、jQueryをメインに勉強しています。

やりたいこと：パソコンで徐々に幅を小さくしたときもその動きと連動して徐々に画面に収まってくれるようにしたい。

https://stand-4u.com/web/javascript/jquery-method.html
↑このページのように、幅をPCで動かしたときも、ちゃんとすべての内容物がおさまってくれるようになっている感じ

実際のコード

html
1  <div id="about">
2        <section class="about container">
3            <a name="look">→これは、上のヘッダー部分でlinkを張っていて、そのリンク先です。
4            <div class="box3">
5                <h2 class="h2">About
6                    <div>私の自己紹介</div>
7                </h2>
8
9                <h3>コンセプト</h3>
10                <p>私についての説明。私についての説明。私についての説明。私についての説明。私についての説明。私についての説明。私についての説明。私についての説明。私についての説明。私についての説明。私についての説明。私についての説明。私についての説明。私についての説明。私についての説明。私についての説明。私についての説明。</p>
11            </div>
12        </a>
13            <div class="pic"><img src="img/about.jpg" alt="" class="image_me"></div>  
14        </section>
15    </div>
16    </section>

CSS
1.about {
2  margin-bottom: 145px;
3  display: -webkit-box;
4  display: -ms-flexbox;
5  display: flex;
6  -webkit-box-pack: justify;
7      -ms-flex-pack: justify;
8          justify-content: space-between;
9  -webkit-box-align: center;
10      -ms-flex-align: center;
11          align-items: center;
12}
13
14@media (max-width: 667px) {
15  .about {
16    -webkit-box-orient: vertical;
17    -webkit-box-direction: normal;
18        -ms-flex-direction: column;
19            flex-direction: column;
20    margin-bottom: 130px;
21    padding: 0 15px;
22  }
23}
24
25.box3 {
26  border: solid 1px #707070;
27  background-color: #F0F0F0;
28  width: 315px;
29  padding: 40px;
30}
31
32@media (max-width: 667px) {
33  .box3 {
34    background-color: #fff;
35    width: auto;
36    border: none;
37    padding: 0;
38  }
39}
40
41.box3 h2 {
42  font-size: 64px;
43  margin-bottom: 30px;
44}
45
46@media (max-width: 667px) {
47  .box3 h2 {
48    font-size: 38px;
49  }
50}
51
52.box3 h3 {
53  font-size: 24px;
54  margin-bottom: 30px;
55}
56
57@media (max-width: 667px) {
58  .box3 h3 {
59    font-size: 20px;
60    margin-bottom: 20px;
61  }
62}
63
64.box3 p {
65  line-height: 1.8;
66}
67
68@media (max-width: 667px) {
69  .box3 p {
70    font-size: 12px;
71    line-height: 1.5;
72    margin-bottom: 30px;
73  }
74}
75
76.image_me {
77  width: 100%;
78}
79
80@media (max-width: 667px) {
81  .image_me {
82    width: 100%;
83  }
84}

困ってること

.box3はパーセンテージ指定にしたら、うまくレスポンシブしてくれるのですが、
画像の.image_meが極端に小さくなってしまって、ぶかっこうなんです。
親要素をspace-around;にしてみましたが、、これが凶と出ているのか…

本当は、.box3と.image_meの間は、20pxくらいの幅にしたいんですが…うまくいきません。
画像はちっちゃくなるわ、距離感はとりずらいわ、という感じです。

CSS
1.about {
2  width: auto;
3  margin: 0 auto;
4  margin-bottom: 145px;
5  display: -webkit-box;
6  display: -ms-flexbox;
7  display: flex;
8  -ms-flex-pack: distribute;
9      justify-content: space-around;
10  padding: 0 5%;
11  -webkit-box-align: center;
12      -ms-flex-align: center;
13          align-items: center;
14}
15
16@media (max-width: 667px) {
17  .about {
18    -webkit-box-orient: vertical;
19    -webkit-box-direction: normal;
20        -ms-flex-direction: column;
21            flex-direction: column;
22    margin-bottom: 130px;
23    padding: 0 15px;
24  }
25}
26
27.box3 {
28  border: solid 1px #707070;
29  background-color: #F0F0F0;
30  width: 50%;
31  padding: 40px;
32}
33
34@media (max-width: 667px) {
35  .box3 {
36    background-color: #fff;
37    width: auto;
38    border: none;
39    padding: 0;
40  }
41}
42
43.box3 h2 {
44  font-size: 64px;
45  margin-bottom: 30px;
46}
47
48@media (max-width: 667px) {
49  .box3 h2 {
50    font-size: 38px;
51  }
52}
53
54.box3 h3 {
55  font-size: 24px;
56  margin-bottom: 30px;
57}
58
59@media (max-width: 667px) {
60  .box3 h3 {
61    font-size: 20px;
62    margin-bottom: 20px;
63  }
64}
65
66.box3 p {
67  line-height: 1.8;
68}
69
70@media (max-width: 667px) {
71  .box3 p {
72    font-size: 12px;
73    line-height: 1.5;
74    margin-bottom: 30px;
75  }
76}
77
78.image_woman {
79  width: 100%;
80}
81
82@media (max-width: 667px) {
83  .image_woman {
84    width: 100%;
85  }
86}

何かうまい方法はありませんでしょうか。

伝わりますでしょうか。

分かりにくければすみません。よろしくお願いいたします。

hatena19

2020/08/03 07:52

SCSSならタグにSCSSを追加してください。あと、ちゃんと実行確認できるように @mixin とか変数を省略せずに書いてください。あるいは、コンパイル後のCSSを出してもらった方か回答が付きやすいと思います。

nomura02

2020/08/04 01:00

コンパイル後のCSSに書き換えました！！すみません…

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

回答2件

追記

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <title>test</title>
7    <style>
8        body {
9            width: 100vw;
10            height: 100vh;
11            position: relative;
12            margin: 0;
13        }
14
15        .img {
16            width: 80%;
17            height: 500px;
18            position: absolute;
19            top: 0;
20            right: 0;
21            bottom: 0;
22            left: 0;
23            margin: auto;
24            background-image: url(https://f.easyuploader.app/eu-prd/upload/20200804022513_576a4a41565850654663.jpg);
25            background-repeat: no-repeat;
26            background-position: center;
27        }
28    </style>
29</head>
30
31<body>
32    <div class="img"></div>
33</body>
34
35</html>

こういうことでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <title>test</title>
7    <style>
8        body {
9            width: 100vw;
10            position: relative;
11            margin: 0;
12        }
13
14        .img {
15            width: 80%;
16            height: 500px;
17            position: absolute;
18            top: 0;
19            right: 0;
20            bottom: 0;
21            left: 0;
22            margin: auto;
23            background-image: url(https://f.easyuploader.app/eu-prd/upload/20200804022513_576a4a41565850654663.jpg);
24            background-repeat: no-repeat;
25            background-position: center;
26        }
27    </style>
28</head>
29
30<body>
31    <div class="img"></div>
32    <script>
33        const bgAdjust = () => {
34            const body = document.body;
35            const bodyHeight = window.innerHeight;
36            body.style.height = bodyHeight + "px";
37        }
38        bgAdjust();
39        window.addEventListener("resize", () => {
40            bgAdjust();
41        });
42    </script>
43</body>
44
45</html>