가로세로비(aspect-ratio)

aspect-ratio는 사진의 가로와 세로의 비율을 정하는 사진 틀과 같습니다.

이 속성을 사용하면 요소의 크기를 조절할 때, 원하는 가로 세로 비율을 유지할 수 있습니다.

코드 예시

CSS
.box {
  width: 100px; /* 가로 너비 */
  aspect-ratio: 16 / 9; /* 16:9 가로세로비 */
  background-color: lightblue;
}

.box 클래스를 사용한 요소는 너비가 100px로 설정되고, 높이(height)는 자동으로 56.25px (100 / 16 * 9)이 되어 16:9 비율을 유지합니다.

object-fit은 사진을 사진 앨범에 넣을 때 어떻게 넣을지 결정하는 것과 유사합니다.

컨테이너의 크기에 맞게 콘텐츠를 확대/축소하되, 콘텐츠의 가로세로비를 유지합니다.

만약 콘텐츠의 비율이 컨테이너의 비율과 다르다면, 초과하는 부분이 잘리게 됩니다.

콘텐츠의 크기를 변경하지 않고 그대로 유지합니다.

컨테이너의 크기와 상관없이 원래의 크기로 표시되며, 주로 중앙에 위치하게 됩니다.

콘텐츠가 컨테이너에 완전히 맞도록 확대/축소하되, 가로세로비를 유지합니다.

콘텐츠가 컨테이너를 완전히 채우지 않을 경우, 여백이 생기게 됩니다.

CSS
.image {
  width: 300px;
  height: 200px;
  object-fit: cover;
}

.image 클래스를 사용한 이미지 요소는 원래의 이미지 비율을 유지하면서, 300px * 200px 크기의 사각형 안에 꽉 차게 됩니다.

컨테이너를 넘어가는 부분은 잘리게 됩니다.

코드의 별표로 강조된 부분을 따라 입력해 보세요.

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!