주위의 공백이 같은 요소를 양쪽 정렬하고 종횡비를 유지 하시겠습니까?

Question

나는 주위에 같은 공간으로 3 개의 이미지를 정당화하려고 노력하고있다. 나는 이미지의 너비를 퍼센트로 설정했다. 나는 인 flexbox를 사용하려하고 justify-content: space-evenly하지만 이미지는 가로 세로 비율을 유지하지 않습니다

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>

나는이 만약이 justify-content: space-between; 을 시도 화면 비율을

Answer 1

이 문제

난 그냥 당신의 .container에 align-items: center;을 추가했습니다 해결하고 그게 해결합니다. 당신의 바이올린에서

실제로 동작하는 샘플 :

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

희망이 당신을 위해 hlpfull했다.

Answer 2

을 유지할 필요가

또한 작동하지 않으면 크롬이나 최신 버전의 크롬을 사용하지 않을 수도 있습니다.

Answer 3

빈 <span> 및 space-between을 사용하여 각 <img> 주위에 등호 한 공간을 만드십시오.

이 시도 :

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

아니면 HTML 편집 할 필요가 없습니다 더 은혜 방법 :

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