memostack
article thumbnail
CSS를 이용하여 이미지를 정사각형 모양으로 자르기
Frontend/HTML, CSS, JS 2021. 7. 25. 00:32

이미지를 정사각형으로 만들기 단순히 image의 width와 height를 동일하게 해도 되지만, 그렇게하면 이미지가 늘어지거나 축소된다. (보기 좋지 않음) index.html index.css body { padding: 0; margin: 0; width: 100%; } img { width: 500px; height: 500px; } 본 글에서는 위와같이 하는 방법이 아닌, 비율은 유지하면서 정사각형을 벗어나는 부분은 보이지 않도록 하는 방법을 소개한다. 이미지를 정사각형 모양으로 자르기 아래와 이미지 같이 가로, 세로의 길이가 다른 이미지가 있을때 정사각형 모양으로 이미지를 자르는 방법을 살펴보자 (아래 '브레이브걸스' 이미지는 세로보다 가로가 더 길다) 정사각형 영역을 벗어나면 이미지의 비율은..