回答編集履歴
2
修正
answer
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
上記、正円にしたい、楕円はNGなのだと解釈しました。
|
|
4
4
|
|
|
5
|
+
---
|
|
5
6
|
`<div style="width:10%;height:10%;">`
|
|
6
7
|
↑だと、親要素が正方形でないと正円 (正方形) は描画できません。
|
|
7
8
|
|
|
@@ -13,4 +14,10 @@
|
|
|
13
14
|
<div style="width:150%;height:150%;background:transparent url('https://www.seo-pro.jp/seo/wp-content/uploads/2019/05/eycatch-2.jpg') no-repeat center;background-size:contain;border-radius:50%">
|
|
14
15
|
</div>
|
|
15
16
|
</div>
|
|
16
|
-
```
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
また、画像の上下か、画像の左右に"不要な余白"がでてしまうと感じるのであれば
|
|
21
|
+
|
|
22
|
+
`background-size:contain;`ではなく
|
|
23
|
+
`background-size:cover;`にすると、"不要な余白"が消えると思います。
|
1
修正
answer
CHANGED
|
@@ -5,13 +5,11 @@
|
|
|
5
5
|
`<div style="width:10%;height:10%;">`
|
|
6
6
|
↑だと、親要素が正方形でないと正円 (正方形) は描画できません。
|
|
7
7
|
|
|
8
|
-
`<div style="width:10vw;height:10vh;">`
|
|
9
|
-
もしくは
|
|
10
8
|
`<div style="width:200px;height:200px;">`
|
|
11
9
|
というように、「%」指定でない書き方をすると、とりあえず正円になると思います。
|
|
12
10
|
|
|
13
11
|
```HTML
|
|
14
|
-
<div style="width:
|
|
12
|
+
<div style="width:200px;height:200px;"><!--変更-->
|
|
15
13
|
<div style="width:150%;height:150%;background:transparent url('https://www.seo-pro.jp/seo/wp-content/uploads/2019/05/eycatch-2.jpg') no-repeat center;background-size:contain;border-radius:50%">
|
|
16
14
|
</div>
|
|
17
15
|
</div>
|