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

回答編集履歴

1

追記

2019/11/25 16:26

投稿

s8_chu
s8_chu

スコア14731

answer CHANGED
@@ -30,4 +30,37 @@
30
30
  height: auto;
31
31
  }
32
32
  }
33
+ ```
34
+
35
+ ただし、上記のように行うならば、画像ごとにユニークなクラスを与えてしまったほうが分かりやすくなると思います ([動作確認用リンク](https://jsfiddle.net/rjqf1ac3/1/))。
36
+ ```HTML
37
+ <div>
38
+ <img class="uncle_first" src="http://placehold.jp/3d4070/ffffff/150x150.png" alt="uncle">
39
+ </div>
40
+ <div>
41
+ <img class="uncle_second" src="http://placehold.jp/3d4070/ffffff/450x250.png" alt="uncle">
42
+ </div>
43
+ ```
44
+ ```CSS
45
+ .uncle_first {
46
+ width: 100%;
47
+ height: auto;
48
+ margin-top: 60px;
49
+ }
50
+
51
+ .uncle_second {
52
+ display: none;
53
+ }
54
+
55
+ @media screen and (min-width: 744px) {
56
+ .uncle_first {
57
+ display: none;
58
+ }
59
+
60
+ .uncle_second {
61
+ display: block;
62
+ width: 100%;
63
+ height: auto;
64
+ }
65
+ }
33
66
  ```