回答編集履歴
3
誤字修正および情報を整理
answer
CHANGED
|
@@ -6,8 +6,8 @@
|
|
|
6
6
|
|
|
7
7
|
という部分が具体的でないため、質問者様のやりたいことが憶測になってしまいますが、
|
|
8
8
|
|
|
9
|
-
- 正方形ではない画像を中心から正方形にトリミングされた状態でボックス内に表示
|
|
9
|
+
- 正方形ではない画像を中心から正方形にトリミングされた状態でボックス内に表示したい
|
|
10
|
-
- ボックスは親要素の横幅の比率によって変わるため、`〜px` などの絶対指定をせず `〜%` など相対で指定
|
|
10
|
+
- ボックスは親要素の横幅の比率によって変わるため、`〜px` などの絶対指定をせず `〜%` など相対で指定したい
|
|
11
11
|
|
|
12
12
|
上記を実現したい、という前提で進めます。見当違いの回答でしたらすみません。
|
|
13
13
|
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
position: relative;
|
|
55
55
|
z-index: 0;
|
|
56
56
|
}
|
|
57
|
-
.squareBox:before {
|
|
57
|
+
.squareBox:before { /* 2. */
|
|
58
58
|
content: '';
|
|
59
59
|
display: block;
|
|
60
60
|
padding-top: 100%;
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
margin: 0;
|
|
64
64
|
padding: 0;
|
|
65
65
|
display: block;
|
|
66
|
-
position: absolute; /*
|
|
66
|
+
position: absolute; /* 3. */
|
|
67
67
|
top: 0;
|
|
68
68
|
left: 0;
|
|
69
69
|
bottom: 0;
|
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
z-index: 1;
|
|
72
72
|
}
|
|
73
73
|
.squareBox__image {
|
|
74
|
-
width: 100%; /*
|
|
74
|
+
width: 100%; /* 4. */
|
|
75
75
|
height: 100%;
|
|
76
76
|
object-fit: cover;
|
|
77
77
|
}
|
|
@@ -89,16 +89,16 @@
|
|
|
89
89
|
</figure>
|
|
90
90
|
</div>
|
|
91
91
|
|
|
92
|
-
|
|
92
|
+
<!-- スクリプト入れるなら・・・ -->
|
|
93
93
|
</body>
|
|
94
94
|
|
|
95
95
|
</html>
|
|
96
96
|
```
|
|
97
97
|
|
|
98
|
-
### ※もしIE11およびEdgeにも対応したい場合
|
|
98
|
+
### ※もしIE11およびEdgeにも object-fit を対応したい場合
|
|
99
99
|
|
|
100
100
|
IE11およびEdgeへ `object-fit` プロパティを適用することはできません。
|
|
101
|
-
そのため、「IE11とEdgeの場合には要素のサイズや配置を JS で変更する」
|
|
101
|
+
そのため、「IE11とEdgeの場合には要素のサイズや配置を JS で変更する」必要が出てきます。
|
|
102
102
|
この JS の処理を一から考えるのは大変ですが、ちょうど良いプラグインがあります。
|
|
103
103
|
今回、 [object-fit-images](https://github.com/bfred-it/object-fit-images) というJSプラグインを使用して進めて参ります。
|
|
104
104
|
|
|
@@ -112,7 +112,7 @@
|
|
|
112
112
|
|
|
113
113
|
> object-fit-images-master/
|
|
114
114
|
> └─ dist/
|
|
115
|
-
> └─ ofi.min.js
|
|
115
|
+
> └─ **ofi.min.js**
|
|
116
116
|
|
|
117
117
|
この `ofi.min.js` をご自身のプロジェクト内の任意の位置へ配置して下さい。
|
|
118
118
|
|
2
誤字修正および情報を整理
answer
CHANGED
|
@@ -11,31 +11,35 @@
|
|
|
11
11
|
|
|
12
12
|
上記を実現したい、という前提で進めます。見当違いの回答でしたらすみません。
|
|
13
13
|
|
|
14
|
-
※この方法はIE11およびEdgeには対応していません。**
|
|
14
|
+
※この方法はIE11およびEdgeには対応していません。**対応方法は後述します。**
|
|
15
15
|
※重要な点だけ下記に箇条書きにしています。
|
|
16
16
|
※わかりやすい様にマークアップを修正しています。
|
|
17
17
|
|
|
18
18
|
### 要点
|
|
19
19
|
|
|
20
|
-
**
|
|
20
|
+
**1. `.squareBox` へ、親要素に対しての横幅の比率を指定します。**
|
|
21
21
|
|
|
22
|
-
e.g.
|
|
22
|
+
> e.g.
|
|
23
|
-
親要素の 1/2 なら **
|
|
23
|
+
> 親要素の 1/2 なら **width: 50%;**、 1/5 なら **width: 20%;**
|
|
24
24
|
|
|
25
25
|
※ 親要素ではなく画面全体に対しての比率にしたい場合は、 `vw` という相対単位の指定が可能です。
|
|
26
|
-
e.g.
|
|
26
|
+
> e.g.
|
|
27
|
-
画面全体の 1/2 なら **
|
|
27
|
+
> 画面全体の 1/2 なら **width: 50vw;**、 1/5 なら **width: 20vw;**
|
|
28
28
|
|
|
29
|
-
|
|
29
|
+
**2. `.squareBox` に `::before` 疑似要素を生成し、アスペクト比を考慮に入れた `padding-top` を指定します。**
|
|
30
|
-
e.g.
|
|
31
|
-
正方形なら ***padding-top: 100%;***、4:3の長方形なら ***padding-top: 100%;***
|
|
32
30
|
|
|
33
|
-
1. 画像そのものの親要素（ `.squareBox__item` ）に対して絶対配置と上下左右引き伸ばしを指定します。
|
|
34
|
-
|
|
31
|
+
> e.g.
|
|
35
|
-
|
|
32
|
+
> 正方形なら **padding-top: 100%;**、4:3の長方形なら **padding-top: 75%;**
|
|
36
33
|
|
|
37
|
-
|
|
34
|
+
**3. 画像そのものの親要素（ `.squareBox__item` ）に対して絶対配置と上下左右引き伸ばしを指定します。**
|
|
38
35
|
|
|
36
|
+
> - position: absolute; z-index: 1;
|
|
37
|
+
> - top: 0; left: 0; bottom: 0; right: 0;
|
|
38
|
+
|
|
39
|
+
**4. 画像（ `.squareBox__image` ）に幅と高さを指定し、 `object-fit: cover;` にてトリミングします。**
|
|
40
|
+
|
|
41
|
+
**表記例：**
|
|
42
|
+
|
|
39
43
|
```html
|
|
40
44
|
<!DOCTYPE html>
|
|
41
45
|
<html lang="ja">
|
|
@@ -92,18 +96,29 @@
|
|
|
92
96
|
```
|
|
93
97
|
|
|
94
98
|
### ※もしIE11およびEdgeにも対応したい場合
|
|
95
|
-
[object-fit-images](https://github.com/bfred-it/object-fit-images) というJSライブラリを使用します。
|
|
96
99
|
|
|
100
|
+
IE11およびEdgeへ `object-fit` プロパティを適用することはできません。
|
|
101
|
+
そのため、「IE11とEdgeの場合には要素のサイズや配置を JS で変更する」という必要が出てきます。
|
|
102
|
+
この JS の処理を一から考えるのは大変ですが、ちょうど良いプラグインがあります。
|
|
97
|
-
|
|
103
|
+
今回、 [object-fit-images](https://github.com/bfred-it/object-fit-images) というJSプラグインを使用して進めて参ります。
|
|
98
104
|
|
|
99
|
-
1.
|
|
105
|
+
**1. プラグインをダウンロード**
|
|
106
|
+
|
|
107
|
+
[object-fit-images](https://github.com/bfred-it/object-fit-images) のページにアクセスし、「Clone or download」ボタン -> 「Download ZIP」へ進み、 ZIP ファイルをダウンロードします。
|
|
108
|
+
|
|
109
|
+
**2. プラグインを任意のディレクトリへ設置**
|
|
110
|
+
|
|
111
|
+
上記でダウンロードした ZIP ファイルを展開すると、下記の位置にプラグインが入っています。
|
|
112
|
+
|
|
100
113
|
> object-fit-images-master/
|
|
101
114
|
> └─ dist/
|
|
102
115
|
> └─ ofi.min.js
|
|
103
116
|
|
|
104
|
-
の `ofi.min.js` をご自身のプロジェクト内の
|
|
117
|
+
この `ofi.min.js` をご自身のプロジェクト内の任意の位置へ配置して下さい。
|
|
105
118
|
|
|
119
|
+
**3. jQuery とプラグインを読み込み、関数を実行**
|
|
120
|
+
|
|
106
|
-
|
|
121
|
+
jQueryとプラグインを読み込み、 `objectFitImages()` を実行させる記述をします。
|
|
107
122
|
※ `</body>` の直前に挿入します。（「スクリプト入れるなら・・・」のあたりですね。）
|
|
108
123
|
|
|
109
124
|
```html
|
|
@@ -113,9 +128,12 @@
|
|
|
113
128
|
objectFitImages();
|
|
114
129
|
</script>
|
|
115
130
|
```
|
|
116
|
-
|
|
131
|
+
**4. IE・Edgeに対応させるプロパティをCSSへ追記**
|
|
117
132
|
|
|
133
|
+
`object-fit: cover;` を指定しているセレクタへ、 `font-family: 'object-fit: cover;'` を指定します。
|
|
134
|
+
|
|
118
135
|
※本件であれば
|
|
136
|
+
|
|
119
137
|
```css
|
|
120
138
|
.squareBox__image {
|
|
121
139
|
width: 100%;
|
1
誤字修正
answer
CHANGED
|
@@ -1,29 +1,34 @@
|
|
|
1
1
|
まず、画像は元から正方形なのでしょうか？一応、正方形ではないという前提で進めます。
|
|
2
2
|
|
|
3
3
|
また、
|
|
4
|
+
|
|
4
|
-
>レスポンシブの正方形を配置し
|
|
5
|
+
> レスポンシブの正方形を配置し
|
|
6
|
+
|
|
5
7
|
という部分が具体的でないため、質問者様のやりたいことが憶測になってしまいますが、
|
|
8
|
+
|
|
6
9
|
- 正方形ではない画像を中心から正方形にトリミングされた状態でボックス内に表示
|
|
7
10
|
- ボックスは親要素の横幅の比率によって変わるため、`〜px` などの絶対指定をせず `〜%` など相対で指定する
|
|
11
|
+
|
|
8
12
|
上記を実現したい、という前提で進めます。見当違いの回答でしたらすみません。
|
|
9
13
|
|
|
10
|
-
※この方法はIE11およびEdgeには対応していません。対応方法は後述します。
|
|
14
|
+
※この方法はIE11およびEdgeには対応していません。***対応方法は後述します。***
|
|
11
15
|
※重要な点だけ下記に箇条書きにしています。
|
|
12
16
|
※わかりやすい様にマークアップを修正しています。
|
|
13
17
|
|
|
14
18
|
### 要点
|
|
15
19
|
|
|
16
|
-
1. `.squareBox` へ、親要素に対しての横幅の比率を指定します。
|
|
20
|
+
*** 1. `.squareBox` へ、親要素に対しての横幅の比率を指定します。
|
|
21
|
+
|
|
17
22
|
e.g.
|
|
18
|
-
親要素の 1/2 なら width: 50%;、 1/5 なら width: 20%;
|
|
23
|
+
親要素の 1/2 なら ***width: 50%;***、 1/5 なら ***width: 20%;***
|
|
19
24
|
|
|
20
25
|
※ 親要素ではなく画面全体に対しての比率にしたい場合は、 `vw` という相対単位の指定が可能です。
|
|
21
26
|
e.g.
|
|
22
|
-
画面全体の 1/2 なら width: 50vw;、 1/5 なら width: 20vw;
|
|
27
|
+
画面全体の 1/2 なら ***width: 50vw;***、 1/5 なら ***width: 20vw;***
|
|
23
28
|
|
|
24
29
|
1. `.squareBox` に `::before` 疑似要素を生成し、アスペクト比を考慮に入れた `padding-top` を指定します。
|
|
25
30
|
e.g.
|
|
26
|
-
正方形なら padding-top: 100%;、4:3の長方形なら padding-top: 100%;
|
|
31
|
+
正方形なら ***padding-top: 100%;***、4:3の長方形なら ***padding-top: 100%;***
|
|
27
32
|
|
|
28
33
|
1. 画像そのものの親要素（ `.squareBox__item` ）に対して絶対配置と上下左右引き伸ばしを指定します。
|
|
29
34
|
- position: absolute; z-index: 1;
|
|
@@ -95,8 +100,9 @@
|
|
|
95
100
|
> object-fit-images-master/
|
|
96
101
|
> └─ dist/
|
|
97
102
|
> └─ ofi.min.js
|
|
98
|
-
の `ofi.min.js` を取り出して、プロジェクト内のどこかに置いて下さい。
|
|
99
103
|
|
|
104
|
+
の `ofi.min.js` をご自身のプロジェクト内のどこかに置いて下さい。
|
|
105
|
+
|
|
100
106
|
1. jQueryとライブラリを読み込み、 `objectFitImages()` を実行させる記述をします。
|
|
101
107
|
※ `</body>` の直前に挿入します。（「スクリプト入れるなら・・・」のあたりですね。）
|
|
102
108
|
|
|
@@ -115,7 +121,7 @@
|
|
|
115
121
|
width: 100%;
|
|
116
122
|
height: 100%;
|
|
117
123
|
object-fit: cover;
|
|
118
|
-
font-family: 'object-fit: cover;
|
|
124
|
+
font-family: 'object-fit: cover;'
|
|
119
125
|
}
|
|
120
126
|
```
|
|
121
127
|
のような形ですね。
|