flexbox가 이미지를 늘이는 이유는 무엇입니까?

flexbox가 이미지를 늘이는 이유는 무엇입니까?

---

Flexbox는 이미지를 자연스러운 높이로 늘릴 때이 동작을합니다. 즉, 하위 이미지가있는 flexbox 컨테이너가 있고 해당 이미지의 너비를 조정하면 높이가 전혀 조정되지 않고 이미지가 늘어납니다.

<div>
    <img src="https://loremflickr.com/400/300" >
    <h4>Appify</h4>
    <p> some text </p>
</div>

그리고이 스타일 시트

div {
  display: flex; 
  flex-wrap: wrap;
}
img{ 
  width: 50%
}

내가 의미하는 바를 설명하기 위해이 코드 펜 을 추가했습니다 . 무엇이 원인입니까?

---

align-self기본값 이이므로 스트레칭 중 입니다 stretch. 설정 align-self에 center.

align-self: center

여기 doc 참조 : align-self

---

열쇠는 align-self: center:

.container {
  display: flex;
  flex-direction: column;
}

img {
  max-width: 100%;
}

img.align-self {
  align-self: center;
}

<div class="container">
<p>Without align-self:</p>
<img src="http://i.imgur.com/NFBYJ3hs.jpg" />
<p>With align-self:</p>
<img class="align-self" src="http://i.imgur.com/NFBYJ3hs.jpg" />
</div>

---

Foundation 메뉴와 같은 문제에 직면했습니다. align-self: center;나를 위해 일하지 않았다.

내 해결책은 이미지를 <div style="display: inline-table;">...</div>

---

margin이미지를 정렬하기 위해 추가 :

우리는을 원했기 때문에 다음 image을 left-aligned추가했습니다.

img {
  margin-right: auto;
}

마찬가지로위한 image것으로 right-aligned, 우리는 추가 할 수 있습니다 margin-right: auto;. 이 스 니펫은 두 가지 유형의 정렬에 대한 데모를 보여줍니다.

행운을 빕니다...

div {
  display:flex; 
  flex-direction:column;
  border: 2px black solid;
}

h1 {
  text-align: center;
}
hr {
  border: 1px black solid;
  width: 100%
}
img.one {
  margin-right: auto;
}

img.two {
  margin-left: auto;
}

<div>
  <h1>Flex Box</h1>
  
  <hr />
  
  <img src="https://via.placeholder.com/80x80" class="one" 
  />
  
  
  <img src="https://via.placeholder.com/80x80" class="two" 
  />
  
  <hr />
</div>

---

플렉스 컨테이너 내에 존재하는 이미지에는 디스플레이 블록을 사용하십시오.

참고 URL : https://stackoverflow.com/questions/37609642/why-does-flexbox-stretch-my-image