比率を固定にしたままレスポンシブしたい

###前提・実現したいこと
下記画像のように、横に画像を4つ×3列の形を維持したまま、レスポンシブさせたいです。
また、このカードが配置されている枠（class="stage"）を画面内で中央寄せにもしたいです。

知識不足で大変恐縮ですが、
解決策をご存知の方はご教授頂けますと幸いです。

###発生している問題
比率を維持したままレスポンシブさせることができない状態です。
横幅を狭めると、画像が下に落ちてしまします。

###該当のソースコード

HTML
1<div class="stage">
2	<ul>
3		<li><img src="img/card.png"></li>
4		<li><img src="img/card.png"></li>
5		<li><img src="img/card.png"></li>
6		<li><img src="img/card.png"></li>
7	</ul>
8	<ul>
9		<li><img src="img/card.png"></li>
10		<li><img src="img/card.png"></li>
11		<li><img src="img/card.png"></li>
12		<li><img src="img/card.png"></li>
13	</ul>
14	<ul>
15		<li><img src="img/card.png"></li>
16		<li><img src="img/card.png"></li>
17		<li><img src="img/card.png"></li>
18		<li><img src="img/card.png"></li>
19	</ul>
20</div>

CSS
1.stage { margin:20px auto; }
2.stage li { display:inline-block; margin:5px; }
3.stage li img { width:100%; height:auto; }

行動規範の内容に同意します

回答1件

ベストアンサー

ざっくりとですが、これで並ぶと思います。

css
1.stage {
2	width: 80%;
3	margin: 20px auto;
4}
5.stage ul {
6	display: flex;
7	margin: 5px;
8	padding: 0;
9}
10.stage li {
11	flex: 1 1 100%;
12	margin: 5px;
13	list-style: none;
14}
15.stage li img {
16	width: 100%;
17	height: auto;
18}