포토샵이나 다른 이미지 편집 도구 없이 CSS 몇 줄로 이미지를 자를 수 있습니다. 아래처럼 여러 열로 배치된 썸네일 이미지의 높이가 서로 다를 때 유용합니다.
적용 전
썸네일 높이가 들쭉날쭉하면 전체 레이아웃이 쉽게 흐트러질 수 있습니다.
CSS
아래 코드를 복사해 CSS 파일에 붙여 넣으세요.
img {
height: 200px;
object-fit: cover;
}
영역 안에서 이미지 위치를 옮기고 싶다면 object-position: 10% 10%;를 사용해 보세요.
적용 후
20~30개의 썸네일이 모두 깔끔하게 맞춰지고 레이아웃도 더 이상 어색해 보이지 않습니다. 웹페이지의 개별 이미지에도 이 방법을 사용할 수 있습니다.