teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

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

2019/03/18 22:57

投稿

caramel_sau
caramel_sau

スコア16

title CHANGED
File without changes
body CHANGED
@@ -53,4 +53,5 @@
53
53
 
54
54
  ### 補足情報(FW/ツールのバージョンなど)
55
55
 
56
- ここにより詳細な情報を記載してください。
56
+ ![問題の表示](80ee1687a5c8534a95a0d430780e8c2c.png)
57
+ ![実現したい表示](4f95c2f878d09cf13c02706fe7644b87.png)

1

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

2019/03/18 22:57

投稿

caramel_sau
caramel_sau

スコア16

title CHANGED
File without changes
body CHANGED
@@ -9,15 +9,40 @@
9
9
 
10
10
  ```
11
11
  Bootstrapにて「!inportant」が効いてるのか、
12
- 高さの指定上手く反映されない。
12
+ CSSにて高さの指定をしても、上手く反映されない。
13
13
  ```
14
14
 
15
15
  ### 該当のソースコード
16
16
 
17
17
  ```ここに言語名を入力
18
- <div class="row">
19
- <img src="img/header.jpg" class="img-fluid" alt="responsive image">
20
- </div>
18
+ <!doctype html>
19
+ <html lang="ja">
20
+ <head>
21
+ <!-- Required meta tags -->
22
+ <meta charset="utf-8">
23
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
24
+
25
+ <!-- Bootstrap CSS -->
26
+ <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">
27
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
28
+ <title>Airbnb-responsive</title>
29
+ </head>
30
+ <body>
31
+ <div class="container-fluid p-0">
32
+ <section class="main-img">
33
+ <div class="row">
34
+ <img src="img/header.jpg" class="img-fluid" alt="responsive image"><!-- 表示したい画像 -->
35
+ </div>
36
+ </section>
37
+ </div>
38
+ <!-- Optional JavaScript -->
39
+ <!-- jQuery first, then Popper.js, then Bootstrap JS -->
40
+ <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
41
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
42
+ <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
43
+ </body>
44
+ </html>
45
+
21
46
  ```
22
47
 
23
48
  ### 試したこと