[css] div에 이미지 꽉 채우는 방법

div에 이미지 꽉 채우기

이미지 크기에 따라서 div를 뚫고 나오기도 하고, 여러 문제가 발생한다. 그래서 div 크기에 딱 맞도록 이미지를 넣는 방법을 알아보고자 한다.

 <div class="image-container">
        <img src="./cat.jpg" alt="">
    </div>

img 태그를 이용해 고양이 사진을 넣고 이를 div로 감싸주었다. 이제 div에 크기를 결정해주어서 사용하려고 한다.

.image-container{
            width: 300px;
            height: 300px;
        }

하지만 그 결과 고양이 이미지가 div를 뚫고 나오게 된다. 파란색 영역엔 div를 무시하고 이미지 크기에 따라 들어간 것을 확인할 수 있다.

이럴 경우에는 다음과 같이 해결할 수 있다.

.image-container{
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 300px;
            height: 300px;
        }

overflow: hidden 은 div를 벗어나는 부분을 가려주는 역할을 하고, display: flex 와 그 하위 속성들을 이용하여 혹여나 이지가 잘리더라도 가운데 부분이 div를 통해 보여지도록 해주었다. 결과는 다음과 같다.