이미지의 가로세로비를 유지하면서 틀 안에 맞추기

1. 이미지를 맞출 틀 안에 이미지의 가로, 세로 중 짧은 쪽을 맞춰서 틀을 벗어나게 하는 경우. 틀을 벗어나는 이미지 부분은 잘라낸다(숨긴다).

<div style="width: 120px; height: 90px; overflow: hidden">
    <img src="이미지 경로" style="width: 120px; height: auto;">
</div>

이미지를 맞출 틀 안에 이미지의 가로, 세로 중 긴 쪽을 맞춰서 틀을 벗어나지 않게 하는 경우. 대신 틀과 이미지의 비율이 안맞으면 여백이 생긴다.

<div style="width: 120px; height: 90px; overflow: hidden">
    <img src="이미지 경로" style="width: auto; height: 90px; margin-left: -30px;">
</div>

기본적인 HTML 구조는 div로 img를 감싸는 형태가 된다. div는 원하는 가로세로비를 적용하여 크기를 설정해놓고 overflow: hidden을 주면 되고 img는 위 1번이나 2번 중 원하는 방식에 따라 크기와 위치를 지정해주면 된다.