teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問1枚の画像でデバイス別に表示サイズを変更したい

編集履歴

質問編集履歴

1

現在のコードを反映し、完成イメージを記述しました。

2021/10/23 16:03

投稿

moai8739
moai8739

スコア2

test CHANGED
File without changes
test CHANGED
@@ -2,15 +2,13 @@
2
2
 
3
3
  画像をタイル状に隙間なく表示したい
4
4
 
5
- JqueryのFreewallプラグインを使用しています。
6
-
7
5
  bootstrapを使用しています。
8
6
 
9
7
  古いIE等は考慮しません。
10
8
 
11
9
  画像はローカルに保存せず画像アドレスで引っ張ります。
12
10
 
13
- ![スマホ表示](9553bac459316649b9070aaa57b8ef96.png)
11
+
14
12
 
15
13
  ```ここに言語を入力
16
14
 
@@ -40,37 +38,113 @@
40
38
 
41
39
 
42
40
 
43
- <script src="../js/jquery-1.10.2.min.js"></script>
44
-
45
- <script src="../freewall.js"></script>
46
-
47
- <style type="text/css">
41
+ <style type="text/css">
42
+
43
+ #container {
44
+
45
+ display:flex;
46
+
47
+ width:100%;
48
+
49
+ padding-top:30px;
50
+
51
+
52
+
53
+ margin:0 auto;
54
+
55
+ }
56
+
57
+ #container .item img {
58
+
59
+ background: rgb(135, 199, 135);
60
+
61
+ width:300px;
62
+
63
+ height:auto;
64
+
65
+ vertical-align: bottom;
66
+
67
+
68
+
69
+
70
+
71
+ }
72
+
73
+
74
+
75
+
76
+
77
+ /*スマホ*/
78
+
79
+ @media screen and (max-width: 767px) {
80
+
81
+
82
+
83
+ #container .item img{
84
+
85
+ max-width:100%;
86
+
87
+ min-width:100%;
88
+
89
+ width:500px;
90
+
91
+
92
+
93
+ }
48
94
 
49
95
  #container {
50
96
 
51
- width: 80%;
52
-
53
- margin: auto;
97
+ flex-direction:column;
98
+
99
+
54
100
 
55
101
  }
56
102
 
103
+ }
104
+
105
+ /*タブレット*/
106
+
107
+ @media screen and (min-width:768px) and ( max-width:1024px) {
108
+
109
+ /*　画面サイズが768pxから1024pxまではここを読み込む　*/
110
+
57
- .item {
111
+ #container {
58
-
112
+
59
- background: rgb(135, 199, 135);
113
+ flex-wrap:wrap;
60
-
114
+
61
- width: 320px;
115
+ width:100%;
62
-
116
+
63
- height: 320px;
117
+ margin-right: -60px;
118
+
119
+
120
+
121
+
64
122
 
65
123
  }
66
124
 
125
+ #container .item img {
126
+
127
+ width:350px;
128
+
129
+ flex-wrap:wrap;
130
+
131
+
132
+
133
+ }
134
+
135
+ }
136
+
137
+
138
+
67
- </style>
139
+ </style>
68
-
140
+
69
- </head>
141
+ </head>
70
-
142
+
71
- <body>
143
+ <body>
72
-
144
+
73
- <div id="container" class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
145
+ <div id="container" class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
146
+
147
+
74
148
 
75
149
  <div class="item"><img src="https://www.shonenjump.com/j/comics/_comicimage/jujutsu017.jpg"></div>
76
150
 
@@ -88,50 +162,62 @@
88
162
 
89
163
  </div>
90
164
 
91
- <script>
92
-
93
- $(function() {
94
-
95
- var wall = new Freewall("#container");
96
-
97
- wall.fitWidth();
98
-
99
- });
100
-
101
- </script>
102
-
103
-
104
-
105
- <!-- Optional JavaScript; choose one of the two! -->
106
-
107
-
108
-
109
- <!-- Option 1: Bootstrap Bundle with Popper -->
110
-
111
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
112
-
113
-
114
-
115
- <!-- Option 2: Separate Popper and Bootstrap JS -->
116
-
117
- <!--
118
-
119
- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
120
-
121
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
122
-
123
- -->
124
-
125
- </body>
126
-
127
- </html>
165
+
166
+
167
+
168
+
169
+ <!-- Optional JavaScript; choose one of the two! -->
170
+
171
+
172
+
173
+ <!-- Option 1: Bootstrap Bundle with Popper -->
174
+
175
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
176
+
177
+
178
+
179
+ <!-- Option 2: Separate Popper and Bootstrap JS -->
180
+
181
+ <!--
182
+
183
+ <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
184
+
185
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
186
+
187
+ -->
188
+
189
+ </body>
190
+
191
+ </html>
128
192
 
129
193
  ```
130
194
 
195
+ ■は画像です
196
+
197
+ スマホ時　横2列　
198
+
199
+ 　■■
200
+
201
+ 　■■
202
+
203
+ 　■■
204
+
205
+ 　■■
206
+
207
+ タブレット時　横4列
208
+
131
- ```
209
+ ■■■■
132
-
133
- <div id="container" class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
210
+
134
-
135
- ```
211
+ ■■■■
212
+
136
-
213
+ ■■■■
214
+
215
+ pc時　横6列
216
+
217
+ ■■■■■■
218
+
219
+ ■■■■■■
220
+
221
+ ■■■■■■
222
+
137
- ↑で記述している枚数で表示させたいです
223
+ このようなデザインをイメージしています。