正方形のアイテムを含む応答リスト

正方形の画像とその名前で定義されたユーザーの水平リストを表示する必要があります。その画像は名前の上にあります。正方形のアイテムを含む応答リスト

しかし、私はいくつかの制約があります：コンポーネント全体が応答性でなければならないので、画像と名前の両方がコンポーネントの表示された高さに応じてサイズ変更される必要があります。リストは水平に中央に配置する必要があり、ディスプレイの幅を埋めるのに十分なアイテム（私は10の限界を使いました）。

私の問題は、私がそれが私が持っているルールで動作させることができなかったということです。私はフレックスボックスを使用してサイズ変更を行っていましたが、それは常に方形比を壊します。または、固定サイズを使用して応答するルールを破ります。

これは私がそれを見た目にしたいものです。この例では、固定サイズの画像を使用しました。

EDIT：私はもちろんのコードを提供する必要があります。

HTML：

<div class="display-children"> 
<div ng-repeat="e in students.all" 
     ng-click="chooseChild(e)" 
     ng-class="{'selected': e == student }" 
     class="round-avatar"> 

     <img ng-src="/userbook/avatar/[[ e.id ]]" alt="[[e.displayName]]"/> 
     <span>[[ e.firstName ]]</span> 
</div>

はCSS：

.display-children { 
    height: 12vh; 
    width: 100%; 
    display: flex; 
    flex-direction: row; 
    justify-content: center; 

    .round-avatar { 
     flex: 1 1 auto; 
     opacity: 0.5; 
     height: 100%; 

     img { 
     border-radius: 50%; 
     height: 75%; 
     display: block; 
     overflow: hidden; 
     border: 1px solid $medium-grey; 
     } 

     span { 
     height: 25%; 
     text-align: center; 
     color: $medium-grey; 
     } 
    } 
    }

出典

2017-08-10 Zibron

あなたはあなたのCSS/HTMLコードZibron :)を提供できますか？ –