CSS의 Flexbox가 이미지를 가로로 늘리는 것을 방지하는 방법을 알아보세요.
Flexbox에는 이미지가 상위 컨테이너의 전체 너비까지 수평으로 늘어나는 이상한 기본 동작이 있습니다. 따라서 flex-direction: column이 있는 상위 요소(플렉스 컨테이너)가 있는 경우 이미지인 자식 요소(플렉스 항목), 이미지의 자연스러운 높이 너비가 부모 컨테이너만큼 확장되는 동안 유지됩니다.
이 동작은 브라우저의 기본 CSS 스타일시트(사용자 에이전트 스타일시트)에 따라 일관성이 없습니다.
다행히 해결 방법은 간단합니다. 이미지/플렉스 항목의 align-self만 교체하면 됩니다. 속성의 기본 stretch 값을 다른 값으로.
stretch 대신 center를 사용할 수 있습니다. , 이미지 늘어남을 제거하고 이미지를 상위 컨테이너의 중앙에 수직으로 정렬합니다.
img {
align-self: center;
}예시
내부에 1개의 부모(플렉스 컨테이너)와 2개의 자식 이미지 요소(플렉스 항목)가 있는 다음 CSS 예제를 확인하세요.
- 첫 번째 이미지 요소에는 브라우저 기본
align-self: stretch가 있습니다. 종횡비를 망칩니다. - 두 번째 이미지 요소에
.self-center라는 유틸리티 클래스를 추가했습니다. ,align-self: center스트레칭을 제거하는 선언:
https://codepen.io/StrengthandFreedom/pen/qBBoMOX
영광입니다. 문제가 해결되었습니다!
참고:top을 사용할 수도 있습니다. , 이미지를 상위 컨테이너 상단에 수직으로 정렬합니다.
img {
align-self: top;
}
두 방법 모두 이미지에서 늘이기 값을 제거하지만 top을 사용해야 하는지 여부 또는 center 이미지로 수행하려는 작업에 따라 다릅니다.
알아두면 좋은 정보
Flex 항목에는 기본 align-self가 있습니다. stretch 값 . 따라서 플렉스 항목(자식 요소)이 이미지이든 다른 HTML 요소이든 기본적으로 가로로 늘어납니다.