css 이미지 다루기

<img >태그란?

- 이미지를 삽입하는 태그

- inline 성격으로서 한줄에 표시되려고 함 => width와 height로 조절할 수 가 없음

- div 태그로 감싸서 사용하는게 편리

 

<img>태그 적용방법은?

<div class="container">
	<img 
    	    src="이미지 경로"
            alt="대체문구"
          >
 </div>

max-width 속성

- 가로 세로 비율에 맞게 크기를 맞출 수 있음

img {
		max-width: 100%;
     }
     
/* 부모 영역에서 벗어나지 않도록 이미지의 너비 상한선을 100%로 설정 */

 

object-fit 속성

- 요소의 크기에 맞게 <img>태그의 크기를 조정하는 속성

img {
		object-fit: contain;
     }
     
/* 이미지의 비율을 유지하면서 크기를 변경하여 부모요소를 채움 */

img {
		objeact-fit: cover;
     }
     
 /* 이미지를 부모 요소의 영역의 크기 만큼 확대/축소하여 채움 */
 /* 이미지가 너무 커서 부모크기를 넘길 때 사용 */

img {
		object-fit: fill;
     }
     
/* 이미지의 비율을 유지하지 않고 부모 요소의 크기에 맞춰 채움 */