與方形項目的響應列表

我需要顯示用戶的水平列表，由方形圖片和他們的名字定義，圖片位於名稱的頂部。與方形項目的響應列表

但是，我有一些限制：整個組件必須是響應式的，所以圖片和名稱都應該根據組件的顯示高度來調整大小，列表必須是水平居中的，並且應該能夠保持足夠的項目來填充顯示器的寬度（我使用了十個限制）。

我的問題是，我不能讓它適用於我的規則。我使用了flexbox來實現可調節性，但它總是會打破方形比例，或者我通過使用固定尺寸的圖片來打破響應式規則。

這就是我想要的樣子。以這個例子爲例，我使用了固定大小的圖片。

編輯：我應該有提供課程的代碼。

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 :)？ –