回答編集履歴
2
説明文を足しました。
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が効かないことがあります。
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/3
|
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/3
|
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/3
|
191
|
+
<img src="http://satyr.io/380x1:1/?text=Image" alt="Image">
|
192
|
+
|
193
|
+
</div>
|
178
194
|
|
179
195
|
</div>
|
180
196
|
|