[CSS] <div> 안의 <img> 크기 통일하는 방법 ( object-fit 속성, position : absolute)

1. object-fit

<img> 같은 object의 사이즈를 컨테이너의 크기에 맞춰서 조절할 수 있음

 

사용방법은 <img>를 선택 후 object-fit : cover; 해주면 끝!

img {
	width: 100%;
	height: 200px;
	object-fit: cover;
}

 

 

cover	가로, 세로 비율 유지, 비율이 맞지않아도 이미지를 화대하여 컨테이너 채움
contain	가로, 세로 비율 유지하여 컨테이너에 보여줌
fill	기본값
none	원본 이미지의 사이즈 유지
scale-down	none 또는 contain 중 적절한 속성으로 조절함

 

2. position : absolute

<img>의 부모 컨테이너에서 넘치는 부분을 자름

 

사용방법은 <img>의 css를 position : absolute; 로 주고, <img>의 부모 <div>에 overflow : hidden; 해주면 끝!

 

.container {
	width : 300px;
	height : 200px;
	overflow : hidden;
}
img {
	position : absolute;
	width: 100%;
	height: 200px;
	/* 이미지 가운데 정렬 시 top, left, transform 속성 사용함 */
}