回答編集履歴

2

説明文を足しました。

2018/07/26 10:17

投稿

marshmallowy
marshmallowy

スコア204

test CHANGED
@@ -1,3 +1,13 @@
1
+ main要素は明示的にdisplay: block;を指定しなければ、ブラウザによってmax-width: 768px;が効かないことがある。
2
+
3
+
4
+
5
+ クラス名がmedia-section__imagesの下位階層にimgを包括するmedia-section__imageを追加してます。
6
+
7
+ これは、img要素に直接スタイルを入れるとブラウザによって比率が保たれずつぶれる問題を回避するためです。
8
+
9
+
10
+
1
11
  ```HTML
2
12
 
3
13
  <!DOCTYPE html>

1

まず、main要素はブラウザによって明示的にdisplay:block;を指定しなければ、max-widthが効かないことがあります。

2018/07/26 10:17

投稿

marshmallowy
marshmallowy

スコア204

test CHANGED
@@ -82,6 +82,8 @@
82
82
 
83
83
  main {
84
84
 
85
+ display: block;
86
+
85
87
  margin: 0 auto;
86
88
 
87
89
  padding-top: 24px;
@@ -124,7 +126,7 @@
124
126
 
125
127
  }
126
128
 
127
- .media-section__images > img {
129
+ .media-section__images > .media-section__image {
128
130
 
129
131
  padding: 4px;
130
132
 
@@ -132,6 +134,8 @@
132
134
 
133
135
  width: calc(100%/2 - 4px);
134
136
 
137
+ text-align: center;
138
+
135
139
  }
136
140
 
137
141
  </style>
@@ -154,7 +158,11 @@
154
158
 
155
159
  <div class="media-section__images">
156
160
 
161
+ <div class="media-section__image">
162
+
157
- <img src="http://satyr.io/320x1:1/?text=Image" alt="Image">
163
+ <img src="http://satyr.io/380x1:1/?text=Image" alt="Image">
164
+
165
+ </div>
158
166
 
159
167
  </div>
160
168
 
@@ -172,9 +180,17 @@
172
180
 
173
181
  <div class="media-section__images">
174
182
 
183
+ <div class="media-section__image">
184
+
175
- <img src="http://satyr.io/320x1:1/?text=Image" alt="Image">
185
+ <img src="http://satyr.io/380x1:1/?text=Image" alt="Image">
186
+
176
-
187
+ </div>
188
+
189
+ <div class="media-section__image">
190
+
177
- <img src="http://satyr.io/320x1:1/?text=Image" alt="Image">
191
+ <img src="http://satyr.io/380x1:1/?text=Image" alt="Image">
192
+
193
+ </div>
178
194
 
179
195
  </div>
180
196