ヘッダーに設定したbackground-imageをブレイクポイントの時にデザインカンプと同じ形になるように設定したい。

よろしくお願いいたします。

前提・実現したいこと

①ヘッダーの <div class="top">に設定したbackground-imageをブレイクポイント640pxまで小さくしたときに
補足情報1枚目画像の大きさになるように設定したい。

。

該当のソースコード

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-scale=1">
7    <link rel="stylesheet" href="css/reset.css">
8    <link rel="stylesheet" href="css/style.css">
9    <title>snappers</title>
10</head>
11
12<body>
13
14    <!-- ヘッダー開始-->
15    <header>
16        <div class="top">
17            <div class="logo_nav clearfix">
18                <div class="logo">
19                    <a href="#"><img src="img/logo.png" alt="logo">
20                    </a>
21                </div>
22
23
24                <nav>
25                    <ul>
26
27                        <li><a href="#">Portfolio</a></li>
28
29
30                        <li> <a href="#">About</a></li>
31
32
33                        <li><a href="#">Contact</a></li>
34
35                    </ul>
36                </nav>
37
38                <div id="burger">
39                    <div id="nav-drawer">
40                        <input class="nav-unshown" id="nav-input" type="checkbox"> <label for="nav-input"
41                            id="nav-open"><span></span></label> <label class="nav-unshown" for="nav-input"
42                            id="nav-close"></label>
43                        <div id="nav-content">
44                            <nav class="burger_content">
45                                <ul class="global_nav">
46
47                                    <li><a href="#">Portfolio</a></li>
48
49
50                                    <li> <a href="#">About</a></li>
51
52
53                                    <li><a href="#">Contact</a></li>
54
55                                </ul>
56                            </nav>
57                        </div>
58                    </div>
59                </div>
60            </div>
61        </div>
62    </header>

CSS
1.clearfix::after {
2    content: "";
3    display: block;
4    clear: both;
5}
6
7img {
8    /* width: 100%; */
9    max-width: 100%;
10    height: auto;
11}
12
13* {
14    box-sizing: border-box;
15    float: none;
16    position: static;
17}
18
19/* 初期設定ここまで */
20
21/* header設定 */
22header {
23    max-width: 1260px;
24    width: 100%;
25    margin: 0 auto 50px;
26    /* position: relative; */
27}
28
29.top {
30    background-image: url(../img/bg-about.jpg);
31    /* background-size: 100%; */
32    height: 320px;
33    width: 1260px;
34
35    /* width:1260px;を入れることでabout.jpgが崩れなくなる。 */
36
37    /* margin: 0 auto; */
38}
39
40/* headerここまで */
41.logo_nav {
42    width: 100%;
43    max-width: 960px;
44    margin: 0 auto;
45
46}
47
48.logo {
49    /* position: absolute; */
50    /* top: 60px; */
51    margin-top: 50px;
52    float: left;
53}
54
55/* nav開始 */
56nav {
57    float: right;
58    margin-top: 60px;
59}
60
61nav li {
62    float: left;
63    margin: 0 15px;
64    list-style: none;
65    color: #fff;
66    font-weight: bold;
67    font-size: 20px;
68}
69
70nav li a {
71    color: #fff;
72    text-decoration: none;
73}
74
75/*以下ハンバーガーメニューcss*/
76
77#burger {
78    /* position: relative; */
79    float: right;
80    margin-top: 50px;
81}
82
83.burger_content {
84    margin-top: 50px;
85}
86
87.burger_content a {
88    display: block;
89    background-color: #1d719b;
90    color: white;
91    font-size: 20px;
92    display: block;
93    /*	position: absolute;*/
94    /* top: 0;
95	left: 0; */
96    /*width: 100%;*/
97    /*	height: 100%;*/
98    margin: 0 0 2px 0;
99    padding: 15px 0;
100}
101
102.burger_content li {
103    /*	width: 100%;*/
104    /*	height: 50px;*/
105    background-color: #1d719b;
106    /* margin: 0 0 2px 0; */
107    padding-left: 30px;
108    /* position: relative; */
109}
110
111#nav-drawer {
112    /* position: relative;
113    position: absolute;
114    top: -60px;
115    right: 20px; */
116}
117
118/*チェックボックス等は非表示に*/
119
120.nav-unshown {
121    display: none;
122}
123
124/*アイコンのスペース*/
125
126#nav-open {
127    display: inline-block;
128    width: 45px;
129    height: 45px;
130    padding: 10px;
131    /*↑paddingでハンバーガーメニューの3本線を中央に寄せる*/
132    vertical-align: middle;
133    background-color: #fff;
134    border-radius: 3px;
135}
136
137/*ハンバーガーアイコンをCSSだけで表現*/
138
139#nav-open span,
140#nav-open span:before,
141#nav-open span:after {
142    position: absolute;
143    height: 3px;
144    /*線の太さ*/
145    width: 25px;
146    /*長さ*/
147    border-radius: 3px;
148    background: #555;
149    display: block;
150    content: '';
151    cursor: pointer;
152    /* background-color: #fff; */
153}
154
155#nav-open span:before {
156    bottom: -10px;
157}
158
159#nav-open span:after {
160    bottom: -20px;
161}
162
163/*閉じる用の薄黒カバー*/
164
165#nav-close {
166    display: none;
167    /*はじめは隠しておく*/
168    position: fixed;
169    z-index: 99;
170    top: 0;
171    /*全体に広がるように*/
172    left: 0;
173    width: 100%;
174    height: 100%;
175    background: black;
176    opacity: 0;
177    transition: .3s ease-in-out;
178}
179
180/*中身*/
181
182#nav-content {
183    overflow: auto;
184    position: fixed;
185    top: 0;
186    left: 0;
187    z-index: 9999;
188    /*最前面に*/
189    width: 90%;
190    /*右側に隙間を作る（閉じるカバーを表示）*/
191    max-width: 330px;
192    /*最大幅（調整してください）*/
193    height: 100%;
194    background: #fff;
195    /*背景色*/
196    transition: .3s ease-in-out;
197    /*滑らかに表示*/
198    -webkit-transform: translateX(-105%);
199    transform: translateX(-100%);
200    /*左に隠しておく*/
201}
202
203/*チェックが入ったらもろもろ表示*/
204
205#nav-input:checked~#nav-close {
206    display: block;
207    /*カバーを表示*/
208    opacity: .5;
209}
210
211#nav-input:checked~#nav-content {
212    -webkit-transform: translateX(0%);
213    transform: translateX(0%);
214    /*中身を表示（右へスライド）*/
215    box-shadow: 6px 0 25px rgba(0, 0, 0, .15);
216}
217
218.global_nav {
219    float: right;
220    margin-top: 60px;
221}
222
223.global_nav li {
224    float: left;
225    list-style: none;
226    font-size: 20px;
227    font-weight: bold;
228    margin-right: 20px;
229}
230
231.global_nav li a {
232    color: #fff;
233    text-decoration: none;
234}
235
236@media screen and (max-width: 641px) {
237    header {
238        margin-bottom: 35px;
239    }
240
241
242    .top {
243        max-width: 100%;
244    }
245
246
247}

試したこと

<div class="top">にbackground-size: 100%;と height: 320px; width: 1260px;
を設定するが必要以上に幅が小さくなってしまう。

}```

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

ブラウザ環境 chrome

【追記です】
大変失礼いたました。
補足情報の2枚目の画像に現状のキャプチャを追加しました。

<div class="top">の中にbackground-imageとしてカメラの画像(背景用)を入れました。 <div class="top">幅1260pxに設定し、カメラの画像の幅も1260pxです。ブレイクポイント641pxになったときに補足情報の2枚目の画像のようにはみ出て表示されてしまいます。補足情報1枚目の画像のようにはみ出ずに全体が表示されるようにしたいです。

※ハンバーガーメニューは作りかけなので無視してください。

退会済みユーザー

2020/06/25 05:57

状況がよくわかりません。現状はどのような状況で目標はどうしたいか。画像だけだと判断できませんので、具体的な値を示してください

Lhankor_Mhy

2020/06/25 06:15

メディアクエリがないようなのですが、ご提示のCSSは「ブレイクポイント640pxまで小さくしたとき」のものだと理解していいですか？

Lhankor_Mhy

2020/06/25 06:19

失礼しました。640でテキスト検索していたので、見逃していました。

icchiman

2020/06/25 06:24

ご回答ありがとうございます。先程は、大変失礼いたしました。補足情報に詳細を追記しましたので、お手数おかけいたしますがご確認いただけますか。

退会済みユーザー

2020/06/25 06:27

追記ありがとうございます。補足情報の2枚目というのがない？と思うので再度追加お願いします。

icchiman

2020/06/25 06:49

重ねて失礼いたしました。補足情報に2枚目の画像を追加しました。

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

回答2件

background-sizeをcoverでしてすればいいかと思います。
また、background-positionもcenterにして中心ぞろえにしています。

CSS
1.top {
2  background-position: center;
3}
4@media screen and (max-width: 641px) {
5  .top {
6    background-size: cover;
7  }
8}
9

投稿2020/06/25 06:53

退会済みユーザー

総合スコア0

ご提示のカンプは648pxあったので、640pxのブレイクポイントでピクセル単位でこの画像通り、というのは実現できないと思います。

なので、大雑把に似ていればいいですよね？

サンプル

css
1@media screen and (max-width: 641px) {
2    header {
3        margin-bottom: 35px;
4    }
5
6
7    .top {
8        max-width: 100%;
9        height: 246px;
10        background-size:contain;
11    }
12
13
14}