回答編集履歴
7
コード修正
test
CHANGED
|
@@ -25,10 +25,6 @@
|
|
|
25
25
|
content: "";
|
|
26
26
|
|
|
27
27
|
display: block;
|
|
28
|
-
|
|
29
|
-
top: 0;
|
|
30
|
-
|
|
31
|
-
left:0;
|
|
32
28
|
|
|
33
29
|
width: 100%;
|
|
34
30
|
|
6
誤字修正
test
CHANGED
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
|
|
65
65
|
縦横比 2:1 なら 幅15% * (1 / 2) = 7.5% と計算します。~~
|
|
66
66
|
|
|
67
|
-
画像の親要素(td)の
|
|
67
|
+
画像の親要素(td)の疑似要素に padding-top で高さを設定する方法で縦横比を設定します。
|
|
68
68
|
|
|
69
69
|
縦横比 2:1 なら 50% にします。
|
|
70
70
|
|
5
説明の改善
test
CHANGED
|
@@ -60,9 +60,13 @@
|
|
|
60
60
|
|
|
61
61
|
|
|
62
62
|
|
|
63
|
-
画像の親要素(td)の padding-top を高さを縦横比に合わせて設定します。
|
|
63
|
+
~~画像の親要素(td)の padding-top を高さを縦横比に合わせて設定します。
|
|
64
64
|
|
|
65
|
-
縦横比 2:1 なら 幅15% * (1 / 2) = 7.5% と計算します。
|
|
65
|
+
縦横比 2:1 なら 幅15% * (1 / 2) = 7.5% と計算します。~~
|
|
66
|
+
|
|
67
|
+
画像の親要素(td)の記事要素に padding-top で高さを設定する方法で縦横比を設定します。
|
|
68
|
+
|
|
69
|
+
縦横比 2:1 なら 50% にします。
|
|
66
70
|
|
|
67
71
|
画像は絶対配置にして `object-fit` で伸縮による歪を防ぎます。
|
|
68
72
|
|
4
コード修正
test
CHANGED
|
@@ -6,7 +6,9 @@
|
|
|
6
6
|
|
|
7
7
|
table {
|
|
8
8
|
|
|
9
|
-
width:
|
|
9
|
+
width: 100%;
|
|
10
|
+
|
|
11
|
+
border: 1px solid;
|
|
10
12
|
|
|
11
13
|
}
|
|
12
14
|
|
|
@@ -14,9 +16,23 @@
|
|
|
14
16
|
|
|
15
17
|
width:15%;
|
|
16
18
|
|
|
17
|
-
p
|
|
19
|
+
position: relative;
|
|
18
20
|
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
td::before {
|
|
24
|
+
|
|
25
|
+
content: "";
|
|
26
|
+
|
|
19
|
-
p
|
|
27
|
+
display: block;
|
|
28
|
+
|
|
29
|
+
top: 0;
|
|
30
|
+
|
|
31
|
+
left:0;
|
|
32
|
+
|
|
33
|
+
width: 100%;
|
|
34
|
+
|
|
35
|
+
padding-top: 50%;
|
|
20
36
|
|
|
21
37
|
}
|
|
22
38
|
|
3
サンプルリンク追加
test
CHANGED
|
@@ -40,6 +40,10 @@
|
|
|
40
40
|
|
|
41
41
|
|
|
42
42
|
|
|
43
|
+
[CodePenサンプル](https://codepen.io/hatena19/pen/PoGKjze)
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
43
47
|
画像の親要素(td)の padding-top を高さを縦横比に合わせて設定します。
|
|
44
48
|
|
|
45
49
|
縦横比 2:1 なら 幅15% * (1 / 2) = 7.5% と計算します。
|
2
誤字修正
test
CHANGED
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
|
|
41
41
|
|
|
42
42
|
|
|
43
|
-
画像の親要素(td)
|
|
43
|
+
画像の親要素(td)の padding-top を高さを縦横比に合わせて設定します。
|
|
44
44
|
|
|
45
45
|
縦横比 2:1 なら 幅15% * (1 / 2) = 7.5% と計算します。
|
|
46
46
|
|
|
@@ -58,4 +58,4 @@
|
|
|
58
58
|
|
|
59
59
|
|
|
60
60
|
|
|
61
|
-
ということなら、object-fit のIE
|
|
61
|
+
ということなら、object-fit のIE非対応は無視できますね。
|
1
説明追記
test
CHANGED
|
@@ -44,6 +44,18 @@
|
|
|
44
44
|
|
|
45
45
|
縦横比 2:1 なら 幅15% * (1 / 2) = 7.5% と計算します。
|
|
46
46
|
|
|
47
|
+
画像は絶対配置にして `object-fit` で伸縮による歪を防ぎます。
|
|
48
|
+
|
|
47
49
|
|
|
48
50
|
|
|
49
51
|
object-fit はIEは非対応ですので、IEにも対応させたいなら、画像は background-image で表示させるといいでょしう。
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
> 大きさを揃える際に高さがわずかに大きい、又は小さい部分については
|
|
56
|
+
|
|
57
|
+
わずかな誤差で歪みもそれほど生じないかと思うので伸縮し揃えたいです。
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
ということなら、object-fit のIEは非対応は無視できますね。
|