背景の画像が模写サイトのように伸縮されない

前提・実現したいこと

背景がうまく縮小されないので、模写サイトのように、縮小しても横幅全体が見えるようにしたい。
模写元URL：https://www.airbnb.jp/gift

発生している問題・エラーメッセージ

画面を縮小した時に、横幅いっぱいに画像を表示させたいのですが、
画像の横幅が見切れる形になってしまいます。

こう書けばうまく縮小される、またはここで調べろ、のように教えていただきたいです。

かなりの初心者なので、お見苦しいコードになっているかもしれません。ご了承ください。

該当のソースコード

HTML
1ソースコード<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title>現地の人から借りる家、体験＆スポット-Airbnb</title>
6  <meta name="viewport" content="width=device-width,initial-scale=1">
7  <link rel="stylesheet" href="airmain.css">
8  <link rel="stylesheet" href="airresponsive.css" media="screen and (max-width: 1600px)">
9  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
10</head>
11<body>
12  <!--header-->
13  <div class="header">
14  	  <a class="head-logo" href="#"><img class="logo" src="logo=1.png" alt="logo" width="40" height="40"></a>
15      <div class="form-block">
16      	<form>
17	      <input type="text" class="search" placeholder="探す">
18	    </form>
19	  </div>
20	  <div class="header-menu"> 
21	  	  <ul>
22	  	  	 <div class="underline"><li><a href="#" class="headbutton host">ホストをはじめる</a></li></div>
23	  	  	 <div class="underline"><li><a href="#" class="headbutton help">ヘルプ</a></li></div>
24	  	  	 <div class="underline"><li><a href="#" class="headbutton registration">登録する</a></li></div>
25	  	  	 <div class="underline"><li><a href="#" class="headbutton login">ログイン</a></li></div>
26	  	 </ul> 	 
27	  </div>
28  </div>
29  <!--/header-->
30  <!--content-->
31  <div class="background-img">
32    <div class=va-middle>
33      <div class="trip">旅を贈ろう。</div>
34      <div class="message1"> Airbnbギフトカードで、世界をぐんと身近に</div>
35      <a href="#"><div class="giftcard"><div class="gifttext">ギフトカードを登録</div></div></a>
36
37    </div>
38  </div>
39  
40
41</body>
42</html>

CSS
1/*header*/
2.header{
3	display: flex;
4	height: 80px;
5}
6
7.head-logo{
8	  margin-top: 25px;
9    margin-left: 10px;
10    margin-right: 10px;x
11}
12
13form{
14	  margin-top: 16px;
15}
16
17.form-block{
18	width: 100%;
19}
20
21.search {
22    padding:15px 15px 15px 30px;
23    margin-left: 5px;
24    background: url('search-icon.png') no-repeat 9px 20px;
25    font-size: 20px;
26    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px;
27    border-style: solid;
28    border-color: rgb(235, 235, 235) ;
29    border-radius: 4px ;
30}
31
32
33input[type="text"]:focus {
34  outline: 0;
35  box-shadow: rgba(0, 0, 0, 0.1) 0px 6px 12px ;
36  width: 70%;
37}
38
39.search:hover {
40 box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 8px 1px ;
41}
42
43.header-menu ul{
44	display: flex;
45	list-style: none;
46	white-space: nowrap;
47
48}
49
50.header-menu ul li{
51	padding: 20px;
52	margin-top: 16px;
53
54}
55
56a{
57  color: black !important;
58}
59
60a:hover{
61  text-decoration: none !important;
62  color: black !important;
63
64}
65
66.underline:hover{
67	border-bottom: solid gray;
68}
69/*header*/
70/*content*/
71
72.background-img{
73    max-width: 100%;
74    margin-top: 8px;
75    background-image: url(https://a0.muscache.com/airbnb/gift_credit_v2/HomePage/BackgroundHomeSummer.jpg);
76    background-size: cover;
77    padding-bottom: 250px;
78  }
79
80
81.va-middle{
82  padding-left: 10%;
83  padding-top: 10%;
84}
85
86.trip{
87  font-family: "ＭＳ Ｐゴシック",sans-serif;
88  font-size: 50px;
89  color: white;
90  margin-bottom: 15px;
91}
92
93.message1{
94  color: white;
95  margin-bottom: 15px;
96}
97
98.giftcard{
99  height: 48px;
100  width: 180px;
101  background-color: white;
102  border-radius: 5px;
103
104}
105
106.gifttext{
107  padding:15px;
108  margin-bottom: 15px;
109}

。

m.ts10806

2019/05/05 07:30

コード量が増えてくるとどこが原因なのか問題の切り分けが難しくなってくるので「そこだけを実現する」ミニマムコードを作って確かめることを強くすすめます。ためしに今回やってみて結果を追記してください

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

回答2件

ベストアンサー

<div class="background-img"></div>が、レスポンシブ未対応のため、縦横のアスペクト比（画面幅に対する高さ）が維持されず、高さが変わりません。
そして背景画像がbackground-size: cover;で指定されているため、高さ分の画像を確保したままになるので、縮小したら見切れるように見えてしまいます。

今の挙動は、背景色とbackground-repeat: no-repeat;、background-size: contain;を設定すると、高さが変わっていないのが分かるかと思います。

対策は、divをレスポンシブ対応させる必要があります。いくつか方法があるので、「divブロック要素可変」等で検索して、理解しやすいサイトを基に試してみてください。

-追記-
一部編集しました。

投稿2019/05/06 02:05

編集2019/05/06 02:17

yoshinavi

総合スコア3523

lasdream03

2019/05/06 07:00

丁寧な解説ありがとうございました。まだ完璧な解決には至っていませんが、解決の糸口がみえました。 yoshinaviさんの手ほどきを用いながら試行錯誤していきます。ありがとうございました。

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

下記の内容でいかがでしょうか。。

css
1.background-img {
2    max-width: 100%;
3    margin-top: 8px;
4    background-image: url(https://a0.muscache.com/airbnb/gift_credit_v2/HomePage/BackgroundHomeSummer.jpg);
5    background-size: cover;
6    padding-bottom: 250px;
7    background-color: #000;
8    height: 0;
9    background-repeat: no-repeat;
10    background-repeat: no-repeat;
11    background-position: center center;
12
13}