Begründen Sie Elemente mit gleichem Raum um sie herum und behalten Sie das Seitenverhältnis bei?

Question

Ich versuche, 3 Bilder mit gleichem Platz um sie zu rechtfertigen. Ich stelle die Breite der Bilder in Prozent ein. Ich habe versucht, Flexbox zu verwenden und justify-content: space-evenly aber Bilder nicht Seitenverhältnis beibehalten:

Codepen

.container { 
 
    width: 50%; 
 
    border: 1px solid black; 
 
    
 
    display: flex; 
 
    justify-content: space-evenly; 
 
} 
 

 
.container img { 
 
    width: 10%; 
 
}

<div class="container"> 
 
    <img src="https://cdn2.iconfinder.com/data/icons/humano2/128x128/status/gtk-missing-image.png" /> 
 
    <img src="https://cdn2.iconfinder.com/data/icons/humano2/128x128/status/gtk-missing-image.png" /> 
 
    <img src="https://cdn2.iconfinder.com/data/icons/humano2/128x128/status/gtk-missing-image.png" /> 
 
</div>

Ich brauche Seitenverhältnis

Answer 1

wird Ihr Problem lösen

Ich habe soeben align-items: center; auf Ihre .container und löst es.

Eine Arbeitsprobe aus Ihrer Geige:

.container { 
 
    width: 50%; 
 
    border: 1px solid black; 
 
    display: flex; 
 
    justify-content: space-evenly; 
 
    align-items: center; 
 
} 
 

 
.container img { 
 
    width: 10%; 
 
}

<div class="container"> 
 
    <img src="https://cdn2.iconfinder.com/data/icons/humano2/128x128/status/gtk-missing-image.png" /> 
 
    <img src="https://cdn2.iconfinder.com/data/icons/humano2/128x128/status/gtk-missing-image.png" /> 
 
    <img src="https://cdn2.iconfinder.com/data/icons/humano2/128x128/status/gtk-missing-image.png" /> 
 
</div>

Hoffnung war hlpfull für Sie.

Answer 2

Versuchen Sie, diese justify-content: space-between; Wenn dies zu halten funktioniert auch nicht, dann verwenden Sie vielleicht nicht Chrome oder die neueste Version von Chrome.

Answer 3

Verwenden Sie einen leeren <span> und space-between gleich Raum um jeden <img> zu erstellen.

Versuchen Sie folgendes:

.container { 
 
    width: 50%; 
 
    border: 1px solid black; 
 
    
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
.container img { 
 
    width: 10%; 
 
}

<div class="container"> 
 
<span></span> 
 
<img src="https://cdn2.iconfinder.com/data/icons/humano2/128x128/status/gtk-missing-image.png" /> 
 
<img src="https://cdn2.iconfinder.com/data/icons/humano2/128x128/status/gtk-missing-image.png" /> 
 
<img src="https://cdn2.iconfinder.com/data/icons/humano2/128x128/status/gtk-missing-image.png" /> 
 
<span></span> 
 
</div>

Oder eine Gnade Art und Weise, die nicht benötigen, um Ihre HTML zu bearbeiten:

.container { 
 
    width: 50%; 
 
    border: 1px solid black; 
 
    
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 

 
.container::before, .container::after { 
 
    content: ""; 
 
} 
 

 
.container img { 
 
    width: 10%; 
 
}

<div class="container"> 
 
<img src="https://cdn2.iconfinder.com/data/icons/humano2/128x128/status/gtk-missing-image.png" /> 
 
<img src="https://cdn2.iconfinder.com/data/icons/humano2/128x128/status/gtk-missing-image.png" /> 
 
<img src="https://cdn2.iconfinder.com/data/icons/humano2/128x128/status/gtk-missing-image.png" /> 
 
</div>