回答編集履歴
3
誤字修正および情報を整理
test
CHANGED
|
@@ -14,9 +14,9 @@
|
|
|
14
14
|
|
|
15
15
|
|
|
16
16
|
|
|
17
|
-
- 正方形ではない画像を中心から正方形にトリミングされた状態でボックス内に表示
|
|
17
|
+
- 正方形ではない画像を中心から正方形にトリミングされた状態でボックス内に表示したい
|
|
18
|
-
|
|
18
|
+
|
|
19
|
-
- ボックスは親要素の横幅の比率によって変わるため、`〜px` などの絶対指定をせず `〜%` など相対で指定
|
|
19
|
+
- ボックスは親要素の横幅の比率によって変わるため、`〜px` などの絶対指定をせず `〜%` など相対で指定したい
|
|
20
20
|
|
|
21
21
|
|
|
22
22
|
|
|
@@ -110,7 +110,7 @@
|
|
|
110
110
|
|
|
111
111
|
}
|
|
112
112
|
|
|
113
|
-
.squareBox:before {
|
|
113
|
+
.squareBox:before { /* 2. */
|
|
114
114
|
|
|
115
115
|
content: '';
|
|
116
116
|
|
|
@@ -128,7 +128,7 @@
|
|
|
128
128
|
|
|
129
129
|
display: block;
|
|
130
130
|
|
|
131
|
-
position: absolute; /*
|
|
131
|
+
position: absolute; /* 3. */
|
|
132
132
|
|
|
133
133
|
top: 0;
|
|
134
134
|
|
|
@@ -144,7 +144,7 @@
|
|
|
144
144
|
|
|
145
145
|
.squareBox__image {
|
|
146
146
|
|
|
147
|
-
width: 100%; /*
|
|
147
|
+
width: 100%; /* 4. */
|
|
148
148
|
|
|
149
149
|
height: 100%;
|
|
150
150
|
|
|
@@ -180,7 +180,7 @@
|
|
|
180
180
|
|
|
181
181
|
|
|
182
182
|
|
|
183
|
-
|
|
183
|
+
<!-- スクリプト入れるなら・・・ -->
|
|
184
184
|
|
|
185
185
|
</body>
|
|
186
186
|
|
|
@@ -192,13 +192,13 @@
|
|
|
192
192
|
|
|
193
193
|
|
|
194
194
|
|
|
195
|
-
### ※もしIE11およびEdgeにも対応したい場合
|
|
195
|
+
### ※もしIE11およびEdgeにも object-fit を対応したい場合
|
|
196
196
|
|
|
197
197
|
|
|
198
198
|
|
|
199
199
|
IE11およびEdgeへ `object-fit` プロパティを適用することはできません。
|
|
200
200
|
|
|
201
|
-
そのため、「IE11とEdgeの場合には要素のサイズや配置を JS で変更する」
|
|
201
|
+
そのため、「IE11とEdgeの場合には要素のサイズや配置を JS で変更する」必要が出てきます。
|
|
202
202
|
|
|
203
203
|
この JS の処理を一から考えるのは大変ですが、ちょうど良いプラグインがあります。
|
|
204
204
|
|
|
@@ -226,7 +226,7 @@
|
|
|
226
226
|
|
|
227
227
|
> └─ dist/
|
|
228
228
|
|
|
229
|
-
> └─ ofi.min.js
|
|
229
|
+
> └─ **ofi.min.js**
|
|
230
230
|
|
|
231
231
|
|
|
232
232
|
|
2
誤字修正および情報を整理
test
CHANGED
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
|
|
25
25
|
|
|
26
26
|
|
|
27
|
-
※この方法はIE11およびEdgeには対応していません。**
|
|
27
|
+
※この方法はIE11およびEdgeには対応していません。**対応方法は後述します。**
|
|
28
28
|
|
|
29
29
|
※重要な点だけ下記に箇条書きにしています。
|
|
30
30
|
|
|
@@ -36,41 +36,49 @@
|
|
|
36
36
|
|
|
37
37
|
|
|
38
38
|
|
|
39
|
-
**
|
|
39
|
+
**1. `.squareBox` へ、親要素に対しての横幅の比率を指定します。**
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
|
|
43
|
-
e.g.
|
|
43
|
+
> e.g.
|
|
44
|
-
|
|
44
|
+
|
|
45
|
-
親要素の 1/2 なら **
|
|
45
|
+
> 親要素の 1/2 なら **width: 50%;**、 1/5 なら **width: 20%;**
|
|
46
46
|
|
|
47
47
|
|
|
48
48
|
|
|
49
49
|
※ 親要素ではなく画面全体に対しての比率にしたい場合は、 `vw` という相対単位の指定が可能です。
|
|
50
50
|
|
|
51
|
-
e.g.
|
|
51
|
+
> e.g.
|
|
52
|
-
|
|
52
|
+
|
|
53
|
-
画面全体の 1/2 なら **
|
|
53
|
+
> 画面全体の 1/2 なら **width: 50vw;**、 1/5 なら **width: 20vw;**
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
|
|
57
|
-
|
|
57
|
+
**2. `.squareBox` に `::before` 疑似要素を生成し、アスペクト比を考慮に入れた `padding-top` を指定します。**
|
|
58
|
-
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
|
|
59
|
-
e.g.
|
|
61
|
+
> e.g.
|
|
60
|
-
|
|
62
|
+
|
|
61
|
-
正方形なら **
|
|
63
|
+
> 正方形なら **padding-top: 100%;**、4:3の長方形なら **padding-top: 75%;**
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
|
|
65
|
-
|
|
67
|
+
**3. 画像そのものの親要素（ `.squareBox__item` ）に対して絶対配置と上下左右引き伸ばしを指定します。**
|
|
66
|
-
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
|
|
67
|
-
- position: absolute; z-index: 1;
|
|
71
|
+
> - position: absolute; z-index: 1;
|
|
68
|
-
|
|
72
|
+
|
|
69
|
-
- top: 0; left: 0; bottom: 0; right: 0;
|
|
73
|
+
> - top: 0; left: 0; bottom: 0; right: 0;
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
|
|
73
|
-
|
|
77
|
+
**4. 画像（ `.squareBox__image` ）に幅と高さを指定し、 `object-fit: cover;` にてトリミングします。**
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
**表記例：**
|
|
74
82
|
|
|
75
83
|
|
|
76
84
|
|
|
@@ -186,15 +194,33 @@
|
|
|
186
194
|
|
|
187
195
|
### ※もしIE11およびEdgeにも対応したい場合
|
|
188
196
|
|
|
197
|
+
|
|
198
|
+
|
|
199
|
+
IE11およびEdgeへ `object-fit` プロパティを適用することはできません。
|
|
200
|
+
|
|
201
|
+
そのため、「IE11とEdgeの場合には要素のサイズや配置を JS で変更する」という必要が出てきます。
|
|
202
|
+
|
|
203
|
+
この JS の処理を一から考えるのは大変ですが、ちょうど良いプラグインがあります。
|
|
204
|
+
|
|
189
|
-
[object-fit-images](https://github.com/bfred-it/object-fit-images) というJSライ
|
|
205
|
+
今回、 [object-fit-images](https://github.com/bfred-it/object-fit-images) というJSプラグインを使用して進めて参ります。
|
|
206
|
+
|
|
207
|
+
|
|
208
|
+
|
|
190
|
-
|
|
209
|
+
**1. プラグインをダウンロード**
|
|
191
|
-
|
|
192
|
-
|
|
210
|
+
|
|
211
|
+
|
|
212
|
+
|
|
193
|
-
|
|
213
|
+
[object-fit-images](https://github.com/bfred-it/object-fit-images) のページにアクセスし、「Clone or download」ボタン -> 「Download ZIP」へ進み、 ZIP ファイルをダウンロードします。
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
214
|
+
|
|
215
|
+
|
|
216
|
+
|
|
197
|
-
|
|
217
|
+
**2. プラグインを任意のディレクトリへ設置**
|
|
218
|
+
|
|
219
|
+
|
|
220
|
+
|
|
221
|
+
上記でダウンロードした ZIP ファイルを展開すると、下記の位置にプラグインが入っています。
|
|
222
|
+
|
|
223
|
+
|
|
198
224
|
|
|
199
225
|
> object-fit-images-master/
|
|
200
226
|
|
|
@@ -204,11 +230,15 @@
|
|
|
204
230
|
|
|
205
231
|
|
|
206
232
|
|
|
207
|
-
の `ofi.min.js` をご自身のプロジェクト内の
|
|
233
|
+
この `ofi.min.js` をご自身のプロジェクト内の任意の位置へ配置して下さい。
|
|
234
|
+
|
|
235
|
+
|
|
236
|
+
|
|
208
|
-
|
|
237
|
+
**3. jQuery とプラグインを読み込み、関数を実行**
|
|
209
|
-
|
|
210
|
-
|
|
238
|
+
|
|
239
|
+
|
|
240
|
+
|
|
211
|
-
|
|
241
|
+
jQueryとプラグインを読み込み、 `objectFitImages()` を実行させる記述をします。
|
|
212
242
|
|
|
213
243
|
※ `</body>` の直前に挿入します。（「スクリプト入れるなら・・・」のあたりですね。）
|
|
214
244
|
|
|
@@ -228,12 +258,18 @@
|
|
|
228
258
|
|
|
229
259
|
```
|
|
230
260
|
|
|
261
|
+
**4. IE・Edgeに対応させるプロパティをCSSへ追記**
|
|
262
|
+
|
|
263
|
+
|
|
264
|
+
|
|
231
|
-
|
|
265
|
+
`object-fit: cover;` を指定しているセレクタへ、 `font-family: 'object-fit: cover;'` を指定します。
|
|
232
266
|
|
|
233
267
|
|
|
234
268
|
|
|
235
269
|
※本件であれば
|
|
236
270
|
|
|
271
|
+
|
|
272
|
+
|
|
237
273
|
```css
|
|
238
274
|
|
|
239
275
|
.squareBox__image {
|
1
誤字修正
test
CHANGED
|
@@ -4,19 +4,27 @@
|
|
|
4
4
|
|
|
5
5
|
また、
|
|
6
6
|
|
|
7
|
+
|
|
8
|
+
|
|
7
|
-
>レスポンシブの正方形を配置し
|
|
9
|
+
> レスポンシブの正方形を配置し
|
|
10
|
+
|
|
11
|
+
|
|
8
12
|
|
|
9
13
|
という部分が具体的でないため、質問者様のやりたいことが憶測になってしまいますが、
|
|
10
14
|
|
|
15
|
+
|
|
16
|
+
|
|
11
17
|
- 正方形ではない画像を中心から正方形にトリミングされた状態でボックス内に表示
|
|
12
18
|
|
|
13
19
|
- ボックスは親要素の横幅の比率によって変わるため、`〜px` などの絶対指定をせず `〜%` など相対で指定する
|
|
14
20
|
|
|
21
|
+
|
|
22
|
+
|
|
15
23
|
上記を実現したい、という前提で進めます。見当違いの回答でしたらすみません。
|
|
16
24
|
|
|
17
25
|
|
|
18
26
|
|
|
19
|
-
※この方法はIE11およびEdgeには対応していません。対応方法は後述します。
|
|
27
|
+
※この方法はIE11およびEdgeには対応していません。***対応方法は後述します。***
|
|
20
28
|
|
|
21
29
|
※重要な点だけ下記に箇条書きにしています。
|
|
22
30
|
|
|
@@ -28,11 +36,13 @@
|
|
|
28
36
|
|
|
29
37
|
|
|
30
38
|
|
|
31
|
-
1. `.squareBox` へ、親要素に対しての横幅の比率を指定します。
|
|
39
|
+
*** 1. `.squareBox` へ、親要素に対しての横幅の比率を指定します。
|
|
40
|
+
|
|
41
|
+
|
|
32
42
|
|
|
33
43
|
e.g.
|
|
34
44
|
|
|
35
|
-
親要素の 1/2 なら width: 50%;、 1/5 なら width: 20%;
|
|
45
|
+
親要素の 1/2 なら ***width: 50%;***、 1/5 なら ***width: 20%;***
|
|
36
46
|
|
|
37
47
|
|
|
38
48
|
|
|
@@ -40,7 +50,7 @@
|
|
|
40
50
|
|
|
41
51
|
e.g.
|
|
42
52
|
|
|
43
|
-
画面全体の 1/2 なら width: 50vw;、 1/5 なら width: 20vw;
|
|
53
|
+
画面全体の 1/2 なら ***width: 50vw;***、 1/5 なら ***width: 20vw;***
|
|
44
54
|
|
|
45
55
|
|
|
46
56
|
|
|
@@ -48,7 +58,7 @@
|
|
|
48
58
|
|
|
49
59
|
e.g.
|
|
50
60
|
|
|
51
|
-
正方形なら padding-top: 100%;、4:3の長方形なら padding-top: 100%;
|
|
61
|
+
正方形なら ***padding-top: 100%;***、4:3の長方形なら ***padding-top: 100%;***
|
|
52
62
|
|
|
53
63
|
|
|
54
64
|
|
|
@@ -192,7 +202,9 @@
|
|
|
192
202
|
|
|
193
203
|
> └─ ofi.min.js
|
|
194
204
|
|
|
205
|
+
|
|
206
|
+
|
|
195
|
-
の `ofi.min.js` を
|
|
207
|
+
の `ofi.min.js` をご自身のプロジェクト内のどこかに置いて下さい。
|
|
196
208
|
|
|
197
209
|
|
|
198
210
|
|
|
@@ -232,7 +244,7 @@
|
|
|
232
244
|
|
|
233
245
|
object-fit: cover;
|
|
234
246
|
|
|
235
|
-
font-family: 'object-fit: cover;
|
|
247
|
+
font-family: 'object-fit: cover;'
|
|
236
248
|
|
|
237
249
|
}
|
|
238
250
|
|