css_background-size div 안에 이미지 배율 조정해서 맞추어 넣기

container 안에 images가 있는 구조이고 두 요소들은 모두 div이다.
container 크기에 맞춰서 서로 사이즈가 모두 다른 images들(배열구조)의 크기를 조정하고 싶었다.
images의 배율을 바꿔가면서 container안에 들어가도록 하고 싶은 것이었다.

이때 생각해야 할 부분은
1. images는 background여야함.
나의 경우는 backgroundImage를 이용하고 url을 받아와서 images 안에 이미지를 그리도록 하였음

background-size: cover;

cover 이니까 당연히 images안에 이미지들이 cover 되겠지? 하고 썼는데 이미지가 아래 그림처럼 잘리는 문제가 발생했다.

    <style>
        .container{
            width: 800px;
            height: 500px;
        }
        #images{
            background-size: contain;
            background-repeat: no-repeat;
            width: 100%;
            height: 100%;
        }
    </style>

background-size: contain;

contain이라는 속성을 사용하여 해결!

 <style>
        .container{
            width: 800px;
            height: 500px;
        }
        #images{
            background-size: cover;
            background-repeat: no-repeat;
            width: 100%;
            height: 100%;
        }
    </style>

cover 속성을 사용하면 이미지가 잘리는 이유

• cover 속성을 사용하면 이미지 비율을 유지하면서 가로 또는 세로 중에서 작은 쪽에 맞추어 확장이 됨
• 따라서 이미지가 잘릴 수가 있음
• contain 속성은 이미지 비율을 유지하면서 모두 표시함
• 따라서 이미지가 컨테이너에 맞춰져서 확대 또는 축소됨