回答編集履歴
2
修正
test
CHANGED
@@ -5,6 +5,8 @@
|
|
5
5
|
上記、正円にしたい、楕円はNGなのだと解釈しました。
|
6
6
|
|
7
7
|
|
8
|
+
|
9
|
+
---
|
8
10
|
|
9
11
|
`<div style="width:10%;height:10%;">`
|
10
12
|
|
@@ -29,3 +31,15 @@
|
|
29
31
|
</div>
|
30
32
|
|
31
33
|
```
|
34
|
+
|
35
|
+
|
36
|
+
|
37
|
+
---
|
38
|
+
|
39
|
+
また、画像の上下か、画像の左右に"不要な余白"がでてしまうと感じるのであれば
|
40
|
+
|
41
|
+
|
42
|
+
|
43
|
+
`background-size:contain;`ではなく
|
44
|
+
|
45
|
+
`background-size:cover;`にすると、"不要な余白"が消えると思います。
|
1
修正
test
CHANGED
@@ -12,10 +12,6 @@
|
|
12
12
|
|
13
13
|
|
14
14
|
|
15
|
-
`<div style="width:10vw;height:10vh;">`
|
16
|
-
|
17
|
-
もしくは
|
18
|
-
|
19
15
|
`<div style="width:200px;height:200px;">`
|
20
16
|
|
21
17
|
というように、「%」指定でない書き方をすると、とりあえず正円になると思います。
|
@@ -24,7 +20,7 @@
|
|
24
20
|
|
25
21
|
```HTML
|
26
22
|
|
27
|
-
<div style="width:
|
23
|
+
<div style="width:200px;height:200px;"><!--変更-->
|
28
24
|
|
29
25
|
<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%">
|
30
26
|
|