이미지 맞춤 크기 계산기

가로 배율과 세로 배율 중 어느 쪽을 쓰느냐가 다릅니다. contain은 작은 쪽(min)을 써서 어느 방향으로도 넘치지 않게 하므로 이미지가 다 보이는 대신 여백이 생기고, cover는 큰 쪽(max)을 써서 어느 방향으로도 모자라지 않게 하므로 상자를 꽉 채우는 대신 넘치는 쪽이 잘립니다. 한 글자 차이인데 결과가 정반대입니다.

상자 비율이 원본보다 넓으면 위아래가, 좁으면 좌우가 잘립니다. 16:9 원본을 정사각 상자에 cover로 넣으면 넓이의 43.75%가 잘려 나갑니다. 잘리는 양은 한쪽 방향에만 생기고 가운데 정렬이면 양쪽으로 반씩 나뉩니다. 많이 잘린다면 object-position으로 중심을 옮기거나 상자 비율을 원본에 가깝게 바꾸는 편이 낫습니다.

상자 크기에 화면 배율을 곱한 만큼입니다. CSS 픽셀로 200×200 상자라도 3배 화면에서는 600×600이 필요하고, cover라면 잘려 나가는 몫까지 있어야 하므로 그보다 큽니다. 모자라면 확대되어 흐릿해지고, 지나치게 크면 내려받는 데만 오래 걸리고 화질은 그대로입니다.

비율이 깨져도 상관없을 때만 씁니다. 가로와 세로를 따로 늘려 상자에 딱 맞추기 때문에 원본 비율과 상자 비율이 다르면 이미지가 찌그러집니다. 이미지 태그의 object-fit 기본값이 fill이라, 지정하지 않으면 의도치 않게 찌그러진 채로 그려집니다.

원본보다 크게 키우지 않는다는 점만 다릅니다. 원본이 상자보다 크면 contain과 똑같이 동작하고, 원본이 작으면 확대하지 않고 원래 크기로 둡니다. 작은 아이콘이 흐릿하게 늘어나는 것을 막고 싶을 때 씁니다.

됩니다. background-size의 contain·cover는 object-fit과 같은 규칙으로 배율을 정합니다. 다만 background-position의 기본값이 0% 0%(왼쪽 위)이라 잘리는 위치가 다르니, 가운데를 기준으로 자르려면 center를 지정해야 합니다.

전송되지 않습니다. 모든 계산은 브라우저 안에서만 이루어지고, 넣으신 값은 이 기기를 벗어나지 않습니다.