[CSS]특정 영역 안에 자식요소를 꽉 채우는 object-fit

특정 요소 안에 자식 요소를 꽉 채우는 css 속성이 있다.

object-fit 속성

여태까지는 주어진 영역 안에 이미지를 꽉 채우기 위해서는 background 속성을 사용하곤 했는데,
가끔 <div> 안에 들어간 <img>를 <div> 밖으로 나가지 않게 하기 위해서 정말 온갖 css 속성을 다 때려넣었던 기억이 있는데, 해당 속성을 작성하면 알아서 <img>가 <div> 밖으로 나가지 않는다.

html

<div>
	<img src="img/sample.png" alt="샘플이미지">
</div>

css

div{
	width:400px;
    height:400px;
    border:1px solid #000;
}
div img{
	width:100%;
    height:100%;
    object-fit: contain;
    /* contain | cover | fill | inherit | initial | none | revert | sacle-down | unset 사용 가능*/
}