Minwoo Dev.

object-fit 개인적으로 생각하기에 이미지의 크기를 조절하는 가장 간편한 방법이다. 혹으 같은 요소를 컨테이너의 사이즈에 맞춰서 조정할 수 있다. 아래 예시를 보자. 위 코드들 중 img 의 css 속성을 들여다 보자. img{ width: 100px; height: 100px; object-fit: cover; } 우리가 입력한 img 태그에 속성을 이렇게 간단하게 입력하면 된다. width : 100px - 너비를 100픽셀로 설정 height : 100px - 높이를 100픽셀로 설정 object-fit : cover - 가로세로 비율을 유지한 채로 사이즈가 조절됨 object-fit 속성값별 차이 fill : 사이즈를 채우기 위해 이미지 크기가 늘어나거나 찌그러질 수 있다. contain :..

position : absolute 첫번째 방법은 이미지를 컨테이너로 감싸고, 컨테이너에서 넘치는 부분은 잘라내는 방식이다. div 태그로 감싼 img 요소의 style에 position : absoulte를 추가한다. 요소를 보자. 내부의 img 태그에서 우리가 불러올 이미지를 불러오는 것을 알 수 있다. 그리고 그 img 요소를 div 태그로 감싼다. 요소에서 div 태그인 container class에 속성들을 부여한다. 각 속성별 의미는 아래와 같다. CSS 속성 width : 100px - 컨테이너의 너비를 100px로 설정한다. height : 100px - 컨테이너의 높이를 100px로 설정한다. overflow : hidden - 컨테이너 밖으로 튀어나오는 이미지를 가린다. (안보이게 한다..