Languages/CSS

[CSS] img 크기 쉽게 바꾸기

MOONCO 2022. 1. 12. 15:31

object-fit

CSS의 object-fit 요소를 사용하면,

이미지를 내가 원하는 방식으로 쉽게 설정할 수 있다.

ex ) height 100px, width 100px
옵션 기능
fill 설정된 너비와 높이에 꼭 맞게 늘리고 줄인다.
contain 설정된 너비와 높이에 맞춰 비율을 유지하여 늘리고 줄인다.
cover 설정된 너비와 높이중 더 작은 요소에 맞추고, 남는 부분은 자른다
( 사진 가운데 정렬 )
none 이미지를 편집하지 않고, 설정된 만큼만 보여준다.
( 사진 왼쪽, 위쪽 정렬 )
scale-down none과 contain중에, 이미지가 더 작아지는 것을 선택한다.
사용방식
object-fit: cover;

 

반응형