css object-fit (1) 썸네일형 리스트형 [#. CSS] object-fit 사용해서 이미지 비율 유지하며 사이즈 맞추기 이미지 업로드를 했는데 해당 영역에 꽉 차게 들어가느라 비율이 깨지는 경우가 발생한다 이때 가장 간단한 방법으로 CSS를 사용해서 비율이 깨지지 않도록 해보자 object-fit 속성 값 contain 콘텐츠의 가로 세로 비율을 유지하면서, 요소의 콘텐츠 박스 내부에 들어가도록 크기를 맞춤 조절합니다. 콘텐츠가 콘텐츠 박스 크기에 맞도록 하면서도 가로 세로 비율을 유지하게 되므로, 서로의 가로 세로 비율이 일치하지 않으면 객체가 "레터박스"처럼 됩니다. cover 대체 콘텐츠의 가로 세로 비율을 유지하면서, 요소 콘텐츠 박스를 가득 채웁니다. 서로의 가로 세로 비율이 일치하지 않으면 객체 일부가 잘려나갑니다. fill 요소 콘텐츠 박스 크기에 맞춰 대체 콘텐츠의 크기를 조절합니다. 콘텐츠가 콘텐츠 박스를.. 이전 1 다음