부모 요소(element) 속 이미지 크기 맞추기

 

부모 요소(element)의 width를 설정해도 이미지는 자체 width와 height가 있기 때문에

이미지는 (거의 항상) 부모 박스를 삐져나온다.

이때 자주 쓰는 CSS 속성 조합은

 

 

.parent{
	width:400px;
}

.parent img{
	display:block;
	width:100%;
	height:auto;
}

 

이렇게 부모 element에 원하는 너비를 준다.

 

 

img는 inline요소이긴 하지만 원래 자체 너비와 높이가 있어서 높이, 너비 조정이 가능하지만

좀더 정확성을 기하기 위해서 

display:block을 준다.

그 후에 width:100%를 주면 부모 요소의 너비의 100%를 차지하고

height:auto를 주면 원래 이미지가 가지고 있던 비율에 맞춰서 자동으로 높이가 조절된다.