웹 기초 - img

• <img> 태그
  • HTML 문서에서 이미지를 정의할때 사용
  • <img>요소로 정의된 이미지는 HTML 문서에 직접 삽입되는 것이 아니라, HTML 문서에 이미지가 링크되는 형태
  • <img>요소는 참조된 이미지를 위한 일종의 수용 공간을 만들어 주는 것
  • <img> 요소에는 src 속성과 alt 속성을 반드시 명시해야 한다.

HTML
<img src="https://picsum.photos/id/237/200/300" alt="">
<img src="https://picsum.photos/id/237/500/300" alt="">
<img src="https://picsum.photos/id/237/500/700" alt="">

<hr>

<img src="https://picsum.photos/id/56/200/300" alt="">

<img src="https://picsum.photos/id/56/500/300" alt="">

<img src="https://picsum.photos/id/56/500/700" alt="">

결과

• object-fit
  :object-fit 속성은 img나 video 요소와 같은 대체 요소의 콘텐츠 크기를 어떤 방식으로 조절해 요소에 맞출 것인지 지정한다.

  • object-fit : fill;
    (기본값)
  • object-fit : contain;
    • contain : 가로세로비 유지하면서, 요소의 콘텐츠 박스 내부에 들어가도록 크기를 맞춤 조절
  • object-fit : cover;
    • cover : 대체 콘텐츠의 가로세로비 유지하면서, 요소 콘텐츠 박스를 가득 채운다. 가로세로비가 일치하지 않으면 객체 일부가 사라진다.
  • object-fit : none; (대체 콘텐츠의 크기 조절 x)
  • object-fit : scale-down;
    • scale-down : none과 cotain 중 대체 콘텐츠의 크기가 더 작아지는 값을 선택