Übereinstimmungsknopf Höhe basierend auf Bildseitenverhältnis

Question

Ich habe eine Gruppe von 16x9 Bilder, die auf eine prozentuale Breite (20%) mit einem Add-Taste in den Mix geworfen werden. Ich brauche die Höhe der Schaltfläche "Hinzufügen", um der der Bilder zu entsprechen. Ich habe versucht, die "Höhe" des Knopfes mit padding-top einzustellen und ich habe es auf 11,25% gesetzt, was 9/16 von 20% ist.

Das funktioniert fast in Chrome, aber wenn Sie im Fenster die Größe des Fensters ändern (im Vollbildmodus), wird das Subpixel-Rendering aktiviert und die Höhe der Schaltfläche wird größer als das Bild, was zu Umbruchproblemen führt.

Gibt es einen besseren Weg, dies vielleicht mit flexbox zu erreichen? eine, die ohne Sub-Pixel-Rendering-Probleme funktioniert?

.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

Was ist das?

.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>