[HTML][CSS] 이미지 비율 유지하며 틀에 맞추기

준비물
이미지 4장 각각 100x50, 50x100, 200x100, 100x200


그리고 틀 표시용 DIV 태그

100x100

150x100

100x150

1. 틀보다 작게 비율 맞추기 (여백 생김)

<img style='width:100px;height:50px;object-fit:contain;' src='~~~'/>
img의 크기를 직접 지정하지 않고 부모의 크기에 맞추려면 width:100%;height:100%;를 주면 됩니다.

2. 틀보다 크게 비율 맞추기 (이미지 잘림)

<img style='width:100px;height:50px;object-fit:cover;' src='~~~'/>
img의 크기를 직접 지정하지 않고 부모의 크기에 맞추려면 width:100%;height:100%;를 주면 됩니다.