回答編集履歴
4
こめんとあうとみす修正
answer
CHANGED
@@ -9,13 +9,13 @@
|
|
9
9
|
|
10
10
|
<style>
|
11
11
|
.cs-table-p1 li div {
|
12
|
-
/*画面幅の半分とでもしましょう
|
12
|
+
/*画面幅の半分とでもしましょう*/
|
13
13
|
width: 50vw;
|
14
14
|
height: 10vw;
|
15
15
|
}
|
16
16
|
|
17
17
|
img {
|
18
|
-
/*画像幅は親要素依存にしときます
|
18
|
+
/*画像幅は親要素依存にしときます*/
|
19
19
|
width: 100%;
|
20
20
|
height: 100%;
|
21
21
|
}
|
3
修正
answer
CHANGED
@@ -9,13 +9,13 @@
|
|
9
9
|
|
10
10
|
<style>
|
11
11
|
.cs-table-p1 li div {
|
12
|
-
/
|
12
|
+
/*画面幅の半分とでもしましょう
|
13
13
|
width: 50vw;
|
14
14
|
height: 10vw;
|
15
15
|
}
|
16
16
|
|
17
17
|
img {
|
18
|
-
/
|
18
|
+
/*画像幅は親要素依存にしときます
|
19
19
|
width: 100%;
|
20
20
|
height: 100%;
|
21
21
|
}
|
2
修正
answer
CHANGED
@@ -1,9 +1,9 @@
|
|
1
1
|
```html
|
2
|
-
|
2
|
+
<!--表があって、その中の可変幅なdiv下にあるimgの大きさを毎秒consoleに出してみます
|
3
3
|
|
4
|
-
|
4
|
+
適当な表-->
|
5
5
|
<ul class="cs-table-p1">
|
6
|
-
|
6
|
+
<!-- 適当に画像置いときます -->
|
7
7
|
<li><div><img src='/assets/example/image1.png'></div></li>
|
8
8
|
</ul>
|
9
9
|
|
1
こめんとついき
answer
CHANGED
@@ -3,16 +3,19 @@
|
|
3
3
|
|
4
4
|
//適当な表
|
5
5
|
<ul class="cs-table-p1">
|
6
|
+
//適当に画像置いときます
|
6
|
-
<li><div><
|
7
|
+
<li><div><img src='/assets/example/image1.png'></div></li>
|
7
8
|
</ul>
|
8
9
|
|
9
10
|
<style>
|
10
11
|
.cs-table-p1 li div {
|
12
|
+
//画面幅の半分とでもしましょう
|
11
13
|
width: 50vw;
|
12
14
|
height: 10vw;
|
13
15
|
}
|
14
16
|
|
15
17
|
img {
|
18
|
+
//画像幅は親要素依存にしときます
|
16
19
|
width: 100%;
|
17
20
|
height: 100%;
|
18
21
|
}
|
@@ -20,13 +23,14 @@
|
|
20
23
|
|
21
24
|
<script>
|
22
25
|
(function(){
|
26
|
+
//imgを取得します。配列でとってきてるので[0]ってつけてます
|
23
27
|
let imgs = $('.cs-table-p1 li div img')[0]
|
28
|
+
|
29
|
+
//ブラウザのwidthを適当に変化させましょう。毎秒consoleに出力される値が変わると思います
|
24
30
|
setInterval(function(){
|
25
31
|
console.log(imgs.width)
|
26
32
|
}, 1000)
|
27
33
|
})();
|
28
34
|
|
29
35
|
</script>
|
30
|
-
```
|
36
|
+
```
|
31
|
-
|
32
|
-
適当にこんな感じではだめでしょうか??
|