본문으로 바로가기

[CSS] Flex Div 안에 이미지 사용시 IE Bug

category Helloworld!/CSS 2019. 6. 27. 13:44

IE 에서 flex div 안에 이미지를 넣고 flex 크기에 따라 이미지 크기도 가변되도록 넣어놓았을 시 resizing 이 안되는 버그가 있다.

 

예를들어

이미지 원본 사이즈가 500px * 500px  인 이미지가

300px * 300px 인 이미지로 resizing 되면서 다음 그림 처럼 위아래 여백이 발생을 한다.

위와 같은 현상이 일어났을 때 방면으로 이미지를 감싸고 있는 flex div 에 다음과 같이 css 로 min-height 값을 넣어주면 해결된다.

min-height: 1px;

참고 사이트 : https://github.com/philipwalton/flexbugs/issues/75