teratail
回答率
85.36%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問PictureタグのMax-widthが反映されない

編集履歴

質問編集履歴

4

見やすくしました

2019/10/19 10:48

投稿

MasayaTakashima
MasayaTakashima

スコア14

test CHANGED
File without changes
test CHANGED
@@ -13,6 +13,8 @@
13
13
 
14
14
 
15
15
  画面幅によって画像が変わらない
16
+
17
+
16
18
 
17
19
 
18
20
 
@@ -64,9 +66,11 @@
64
66
 
65
67
  </div>
66
68
 
69
+ ```css
67
70
 
68
71
 
72
+
69
- css
73
+ ```
70
74
 
71
75
  .top_img {
72
76
 
@@ -100,7 +104,11 @@
100
104
 
101
105
 
102
106
 
103
- JS
107
+ ```JS
108
+
109
+
110
+
111
+ ```
104
112
 
105
113
  function slideshow() {
106
114
 

3

HTMLの書き方を変えました

2019/10/19 10:47

投稿

MasayaTakashima
MasayaTakashima

スコア14

test CHANGED
File without changes
test CHANGED
@@ -154,4 +154,4 @@
154
154
 
155
155
 
156
156
 
157
- Pictureではなくimgタグを使いMediaでレスポンスした際は出来ました。
157
+ Pictureではなくimgタグを使いCSSでレスポンスした際は出来ました。

2

HTMLの書き方を変えました

2019/10/19 10:43

投稿

MasayaTakashima
MasayaTakashima

スコア14

test CHANGED
@@ -1 +1 @@
1
- PictureのMax-widthが反映されない
1
+ PictureタグのMax-widthが反映されない
test CHANGED
File without changes

1

HTMLの書き方を変えました

2019/10/19 10:41

投稿

MasayaTakashima
MasayaTakashima

スコア14

test CHANGED
@@ -1 +1 @@
1
- PictureタグとJSを使ったレスポンシブデザイン
1
+ PictureのMax-widthが反映されない
test CHANGED
@@ -1,6 +1,6 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
- 以下のサイトのTOP画像のように一定の時間で画像が変わるようにしたい。ただしPictureとSourceの要素を使って幅ごとに表示される画像も変えたい。
3
+ 以下のサイトのTOP画像のように一定の時間と画面幅で画像が変わるようにしたい。
4
4
 
5
5
  https://www.rakuten.ne.jp/gold/ight-tokyo/
6
6
 
@@ -8,19 +8,11 @@
8
8
 
9
9
 
10
10
 
11
- ここに質問の内容を詳しく書いてください。
12
-
13
- （例）PHP(CakePHP)で●●なシステムを作っています。
14
-
15
- ■■な機能を実装中に以下のエラーメッセージが発生しました。
16
-
17
-
18
-
19
11
  ### 発生している問題
20
12
 
21
13
 
22
14
 
23
- JSのよりCSSのクラス（Display：none；）は付け変わっているが反映されない
15
+ 画面幅によって画像が変わらない
24
16
 
25
17
 
26
18
 
@@ -34,29 +26,43 @@
34
26
 
35
27
 
36
28
 
37
- <picture class="top_img" id="top_img">
29
+ <div class="top_img" id="top_img">
38
30
 
39
- 　　<source media="(max-width: 1024px)" class="bg " srcset="image/slider03.png">
31
+ <picture class="bg ">
40
32
 
41
- 　　<source media="(max-width: 1024px)" class="bg bg_dn " srcset="image/download-1.jpg ">
33
+ <source media="(max-width: 1024px)" srcset="image/slider03.png">
42
34
 
35
+ <source media="(max-width: 580px)" srcset="img/kv_sp_1.jpg">
36
+
37
+ <img src="image/slider03.png">
38
+
39
+ </picture>
40
+
41
+ <picture class="bg bg_dn ">
42
+
43
+ <source media="(max-width: 1024px)" srcset="image/download-1.jpg ">
44
+
45
+ <source media="(max-width: 580px)" srcset="img/kv_sp_2.jpg">
46
+
47
+ <img src="image/download-1.jpg ">
48
+
49
+ </picture>
50
+
51
+ <picture class="bg bg_dn ">
52
+
43
- <source media="(max-width: 1024px)" class="bg bg_dn " srcset="image/download.jpg ">
53
+ <source media="(max-width: 1024px)" srcset="image/download.jpg ">
54
+
55
+ <source media="(max-width: 580px)" srcset="img/kv_sp_3.jpg">
56
+
57
+ <img src="image/download.jpg ">
58
+
59
+ </picture>
44
60
 
45
61
 
46
62
 
47
- <source media="(max-width: 580px)" class="bg " srcset="img/kv_sp_1.jpg">
48
-
49
- <source media="(max-width: 580px)" class="bg bg_dn" srcset="img/kv_sp_2.jpg">
50
-
51
- <source media="(max-width: 580px)" class="bg bg_dn" srcset="img/kv_sp_3.jpg">
52
63
 
53
64
 
54
-
55
- <img src="image/slider03.png">
56
-
57
-
58
-
59
- </picture>
65
+ </div>
60
66
 
61
67
 
62
68
 
@@ -104,9 +110,7 @@
104
110
 
105
111
  $(".bg").eq(1).removeClass("bg_dn");
106
112
 
107
- $(".bg").eq(3).addClass("bg_dn");
108
113
 
109
- $(".bg").eq(4).removeClass("bg_dn");
110
114
 
111
115
  } else if (count % 2 == 0 && count % 3 == 1) {
112
116
 
@@ -114,9 +118,7 @@
114
118
 
115
119
  $(".bg").eq(2).removeClass("bg_dn");
116
120
 
117
- $(".bg").eq(4).addClass("bg_dn");
118
121
 
119
- $(".bg").eq(5).removeClass("bg_dn");
120
122
 
121
123
  } else if (count % 2 == 0 && count % 3 == 0) {
122
124
 
@@ -124,9 +126,7 @@
124
126
 
125
127
  $(".bg").eq(0).removeClass("bg_dn");
126
128
 
127
- $(".bg").eq(4).addClass("bg_dn");
128
129
 
129
- $(".bg").eq(3).removeClass("bg_dn");
130
130
 
131
131
  }
132
132