質問編集履歴

2

問題の画像と、実現したい画像を追記しました。

2019/03/18 22:57

投稿

caramel_sau
caramel_sau

スコア16

test CHANGED
File without changes
test CHANGED
@@ -108,4 +108,6 @@
108
108
 
109
109
 
110
110
 
111
- ここにより詳細な情報を記載してください。
111
+ ![問題の表示](80ee1687a5c8534a95a0d430780e8c2c.png)
112
+
113
+ ![実現したい表示](4f95c2f878d09cf13c02706fe7644b87.png)

1

再現可能なコードに編集しました。imgだけあれば再現可能かと思います。

2019/03/18 22:57

投稿

caramel_sau
caramel_sau

スコア16

test CHANGED
File without changes
test CHANGED
@@ -20,7 +20,7 @@
20
20
 
21
21
  Bootstrapにて「!inportant」が効いてるのか、
22
22
 
23
- 高さの指定上手く反映されない。
23
+ CSSにて高さの指定をしても、上手く反映されない。
24
24
 
25
25
  ```
26
26
 
@@ -32,11 +32,61 @@
32
32
 
33
33
  ```ここに言語名を入力
34
34
 
35
- <div class="row">
35
+ <!doctype html>
36
36
 
37
- <img src="img/header.jpg" class="img-fluid" alt="responsive image">
37
+ <html lang="ja">
38
38
 
39
- </div>
39
+ <head>
40
+
41
+ <!-- Required meta tags -->
42
+
43
+ <meta charset="utf-8">
44
+
45
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
46
+
47
+
48
+
49
+ <!-- Bootstrap CSS -->
50
+
51
+ <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">
52
+
53
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
54
+
55
+ <title>Airbnb-responsive</title>
56
+
57
+ </head>
58
+
59
+ <body>
60
+
61
+ <div class="container-fluid p-0">
62
+
63
+ <section class="main-img">
64
+
65
+ <div class="row">
66
+
67
+ <img src="img/header.jpg" class="img-fluid" alt="responsive image"><!-- 表示したい画像 -->
68
+
69
+ </div>
70
+
71
+ </section>
72
+
73
+ </div>
74
+
75
+ <!-- Optional JavaScript -->
76
+
77
+ <!-- jQuery first, then Popper.js, then Bootstrap JS -->
78
+
79
+ <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
80
+
81
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
82
+
83
+ <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
84
+
85
+ </body>
86
+
87
+ </html>
88
+
89
+
40
90
 
41
91
  ```
42
92