teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

4

こめんとあうとみす修正

2019/01/23 00:22

投稿

sansansandodo
sansansandodo

スコア248

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

修正

2019/01/23 00:21

投稿

sansansandodo
sansansandodo

スコア248

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

修正

2019/01/22 09:30

投稿

sansansandodo
sansansandodo

スコア248

answer CHANGED
@@ -1,9 +1,9 @@
1
1
  ```html
2
- //表があって、その中の可変幅なdiv下にあるimgの大きさを毎秒consoleに出してみます
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

こめんとついき

2019/01/22 09:29

投稿

sansansandodo
sansansandodo

スコア248

answer CHANGED
@@ -3,16 +3,19 @@
3
3
 
4
4
  //適当な表
5
5
  <ul class="cs-table-p1">
6
+ //適当に画像置いときます
6
- <li><div><%= image_tag 'e/image1.png' %></div></li>
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
- 適当にこんな感じではだめでしょうか??