カード型レイアウトで縦横比を維持する方法

Question

カード型レイアウトで縦横比を維持したいのですが、

<ul class="bl_flexContainer">
    <li class="el_flexItem"></li>
    <li class="el_flexItem"></li>
    <li class="el_flexItem"></li>
    <li class="el_flexItem"></li>
    <li class="el_flexItem"></li>
</ul>

ul,li{
  list-style:none;
}
.bl_flexContainer {
	display: flex;
	flex-wrap: wrap;
	padding: 20px;
}
.el_flexItem {
	width: calc(100% / 3 - 40px);
	height: 300px;
	margin-right: 20px;
	margin-bottom: 30px;
	background-color: royalblue;
 
    
}
 

.el_flexItem に対して、　width:100%を指定して
aspect-ratio を　4:3にしましたが、　うまくいきませんでした。

また、el_flexItem に対して、

.el_flexItem:before{
content:"";
display:block;
width:100%;

padding-top:56.25%;

と疑似要素をしてしましたが、うまくいきませんでした。

カード型レイアウトで縦横比を維持する方法はあるのでしょうか？

Answer 1

.el_flexItem の height: 300px; を削除して、
提示の疑似要素のコードを追加すればうまくいくと思いますが。

ul,li{
  list-style:none;
}
.bl_flexContainer {
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
}
.el_flexItem {
  width: calc(100% / 3 - 40px);
  margin-right: 20px;
  margin-bottom: 30px;
  background-color: royalblue;
}

.el_flexItem:before{
content:"";
display:block;
width:100%;
padding-top:56.25%;
}