回答編集履歴
2
説明追記
answer
CHANGED
|
@@ -46,4 +46,11 @@
|
|
|
46
46
|
[CodePenサンプル](https://codepen.io/hatena19/pen/GRZVMgM)
|
|
47
47
|
|
|
48
48
|
上記のサンプルは下記より適当な子供の写真を借りてます。
|
|
49
|
-
[1.800万点以上の高品質なフリー画像素材 - Pixabay](https://pixabay.com/ja/)
|
|
49
|
+
[1.800万点以上の高品質なフリー画像素材 - Pixabay](https://pixabay.com/ja/)
|
|
50
|
+
|
|
51
|
+
---
|
|
52
|
+
JavaScriptを使うなら、顔認識用のライブラリがあるようなので、それを利用して顔を認識して切り抜き部分の自動設定も可能になるでしょう。
|
|
53
|
+
|
|
54
|
+
例えば、下記とか。
|
|
55
|
+
|
|
56
|
+
[face-api.js - ブラウザでの顔認識を行うJavaScript API｜npaka｜note](https://note.com/npaka/n/nc9c244b11089)
|
1
コード微修正
answer
CHANGED
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
}
|
|
22
22
|
.face_list{
|
|
23
23
|
flex: 0 0 25%;
|
|
24
|
-
padding-bottom:
|
|
24
|
+
padding-bottom: 33%; /* 縦横比固定 25:33≒3：4 */
|
|
25
25
|
overflow: hidden;
|
|
26
26
|
position: relative;
|
|
27
27
|
}
|