이미지 max-width로 크기 맞추기

이미지에 고정된 width를 주면 화면이 좁아질 때 넘쳐버릴 수 있습니다. max-width: 100%를 주면 부모보다 커지지 않으면서 원본보다 늘어나지도 않고, height: auto를 함께 쓰면 가로세로 비율이 유지됩니다.

<style>
  .avatar {
    max-width: 50%;
    height: auto;
  }
</style>

컨테이너 크기에 맞춰 이미지가 알아서 줄어드는 게 반응형 디자인의 기본기입니다.