CSS object-fit 속성의 cover 값과 contain 값의 차이점으로 올바른 것은?

쉬움 MDN Web Docs

보기 및 정답

A cover는 비율을 유지하며 컨테이너를 완전히 채우고, contain은 비율을 유지하며 컨테이너 안에 전체가 보이게 한다

B 인라인 요소에 padding을 적용하면 좌우 padding만 레이아웃에 영향을 주고 상하 padding은 완전히 무시된다

C object-fit: cover는 이미지의 가로세로 비율을 무시하고 요소의 크기에 맞춰 강제로 늘려서 채우는 방식이다

D object-fit: contain은 이미지를 요소 영역에 가득 채우면서도 비율을 유지하지만 잘리는 부분이 발생할 수 있다

object-fit: cover는 가로세로 비율을 유지하면서 컨테이너를 빈틈없이 채우되, 넘치는 부분은 잘립니다. contain은 비율을 유지하면서 이미지 전체가 컨테이너 안에 보이도록 하되, 여백이 생길 수 있습니다.

개념 확인은 퀴즈로, 실력은 실전 프로젝트로.
투더제이 코딩클래스에서 시작하세요.

로그인