높이값 일정하고 너비가 가변인 이미지 불러올 때 IOS 간격 이슈

- 이슈: 크기가 제각각 다른 이미지들을 일렬로 정렬했을 때, IOS에서만 너비값이 제멋대로로 나타남

 

- 구체적인 조건: 이미지들은 flex로 정렬했으며, 높이값은 40px로 통일하되 너비값은 가변적이므로 따로 값을 주지 않은 상황.

 

<코드 예시>

<ul>
    <li>
    	<img src="" alt="" />
    </li>
    <li>
    	<img src="" alt="" />
    </li>
    <li>
    	<img src="" alt="" />
    </li>
    <li>
    	<img src="" alt="" />
    </li>
</ul>

> ul {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 30px;

    > li {
        height: 40px;

        img {
            display: block;
            height: 40px;
            object-fit: contain;
        }
    }
}

 

이렇게 적용했을 때, 브라우저와 안드로이드에서는 기기 테스트시 별 문제 없었지만, 문제는 IOS..........!

IOS에서는 이미지의 너비가 지맘대로 넓어져버렸다.

 

그래서 해결책을 위해 여러가지 방법을 고민.

어쨌든 테스트했을 때 문제없이 나오는 걸 확인했고, 이때 적용한 css들을 공유한다.

 

> ul {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 30px;

    > li {
        height: 40px;
        flex-shrink: 0;
        min-width: 0;

        img {
            display: block;
            width: auto;
            height: 40px;
            object-fit: contain;
        }
    }
}

 

해결방법 1. min-width 값을 0으로 설정

가장 유력한 해결 방법으로, IOS에서는 flex 정렬된 아이템이 가변 너비일 때 min-width가 auto가 되면서 예상과 다르게 렌더링되기도 한다. 그래서 min-width 값을 0으로 줘서 예상치 못하게 발생하는 간격을 없앤다.

 

해결방법 2. img의 너비 명시

img의 가로 세로 값이 명시되어 있지 않은 경우 flex 컨테이너에서 예상치 못한 화면이 그려질 수 있다. img의 높이값만 40px으로 설정해뒀으니, 이때 width를 auto로 명시해서 가변 이미지에 대응한다.

 

해결방법 3. flex-shrink 값을 0으로 설정

flex-shrink 값을 설정하지 않아도 예상과 다르게 작동할 수 있다. 0값을 적용한다.

 

 

이번 이슈는 가변적인 이미지와 그를 flex 컨테이너 안에서 제어하려다보니 일어난 충돌로 보인다.

flex는 엄청 편하면서도 가끔 이런 돌발 이슈를 만들어서 사람을 당황시킨다.. 다 알았다고 생각했는데 아닌가 보다ㅠ