イメージの縦横比に基づいて一致ボタンの高さを設定します

Question

私は16ビット幅のイメージ（16％）にグループ化されており、追加ボタンがミックスにスローされます。追加ボタンの高さが画像の高さに等しくなるようにする必要があります。私はpadding-topを使ってボタンの「高さ」を設定しようとしましたが、11.25％に設定しました。これは20％の9/16です。

これはChromeでほとんど機能しますが、例では、ウィンドウのサイズを変更すると（フルスクリーンで）、サブピクセルレンダリングではイメージのサイズよりもボタンの高さが大きくなります。

おそらくflexboxを使用してこれを達成するより良い方法はありますか？サブピクセルレンダリングの問題なしで動作するものはありますか？これについて

.imageSection { 
 
    box-sizing: border-box; 
 
    overflow: hidden; 
 
} 
 

 
.imageSection > img, 
 
.imageSection > button { 
 
    width: 20%; 
 
    float: left; 
 
    box-sizing: border-box; 
 
} 
 

 
.imageSection > button { 
 
    padding: 0; 
 
    border: 0; 
 
    margin: 0; 
 
    padding-top: 11.25%; /* (20/16) * 9 */ 
 
    position: relative; 
 
    background: #bd2a72; 
 
    color: #fff; 
 
} 
 

 
.imageSection > button::after { 
 
    content: "+"; 
 
    position: absolute; 
 
    width: 30px; 
 
    height: 14px; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-left: -15px; 
 
    margin-top: -7px; 
 
}

<div class="imageSection"> 
 
    <button></button> 
 
    <img src="http://placehold.it/1600x900" /> 
 
    <img src="http://placehold.it/1600x900" /> 
 
    <img src="http://placehold.it/1600x900" /> 
 
    <img src="http://placehold.it/1600x900" /> 
 
    <img src="http://placehold.it/1600x900" /> 
 
    <img src="http://placehold.it/1600x900" /> 
 
</div>

Answer 1

何？仕事のおかげで行うの

.imageSection { 
 
    box-sizing: border-box; 
 
    overflow: hidden; 
 
    display: flex; 
 
    align-items: stretch; 
 
    position: relative; 
 
    flex-wrap:wrap; 
 
} 
 

 
.imageSection > img, 
 
.imageSection > button { 
 
    width: 20%; 
 
    box-sizing: border-box; 
 
    height:100%; 
 
} 
 

 
.imageSection > button { 
 
    padding: 0; 
 
    border: 0; 
 
    margin: 0; 
 
    position: relative; 
 
    background: #bd2a72; 
 
    color: #fff; 
 
    height:inherit; 
 
} 
 

 
.imageSection > button::after { 
 
    content: "+"; 
 
    position: absolute; 
 
    width: 30px; 
 
    height: 14px; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-left: -15px; 
 
    margin-top: -7px; 
 
}

<div class="imageSection"> 
 
    <button></button> 
 
    <img src="http://placehold.it/1600x900" /> 
 
    <img src="http://placehold.it/1600x900" /> 
 
    <img src="http://placehold.it/1600x900" /> 
 
    <img src="http://placehold.it/1600x900" /> 
 
    <img src="http://placehold.it/1600x900" /> 
 
    <img src="http://placehold.it/1600x900" /> 
 
</div>