이미지 크기 조절 방법 3가지

1. < img > 태그 + position: absolute
2. < img > 태그 + object-fit
3. < div > 태그 + background-image: url();

1. < img > 태그 + position: absolute

이미지를 컨테이너로 한 번 감싼 후, 가운데 정렬한 뒤 컨테이너 크기를 벗어나는 이미지 부분을 자르는 방법.
< img > 요소에 top과 left, translate 등의 속성으로 이미지의 위치를 조절할 수 있다.

1. < img > 태그를 < div class='container' > 태그로 감싼다.
2. < div class='container' > 태그 와 < img > 태그에 CSS 속성을 추가한다.

< div class='container' > CSS 속성

• width와 height는 렌더링하고 싶은 이미지의 크기를 설정한다.
• overflow: hidden;는 < div class='container' > 태그를 넘어가는 부분의 이미지는 잘라준다.
• position: relative;는 < img > 태그에 position: absoulte를 해줄텐데 절대적인 위치의 기준점이 < div class='container' >이 되도록 설정한다.

< img > CSS 속성

• positon: absoulte;는 position: relative 속성을 가지는 가장 가까운 요소를 기준으로 절대적인 위치를 가지도록 한다.
• width: 100%;는 삽입된 이미지의 가로세로비를 유지한 채, 가로폭을 기준으로 세로 길이가 잘리도록 한다. 이때, 가로 길이는 < div class='container' >에 설정한 width이다.
• height: 100%;는 삽입된 이미지의 가로세로비를 유지한 채, 세로폭을 기준으로 가로 길이가 잘리도록 한다. 이때, 세로 길이는 < div class='container' >에 설정한 height이다.
• width: 100%;와 height: 100%; 를 모두 입력하면 삽입된 이미지의 가로세로비가 망가지더라도 < div class='container' >에 설정한 width와 height 길이만큼 늘어난다.
• top: 50%;, left: 50%;, transform: translate(-50%, -50%);는 < img >태그를 < div class='container' > 안에서 가운데 정렬시킨다.

.container {
  width: 원하는 px 혹은 rem 혹은 em;
  height: 원하는 px 혹은 rem 혹은 em;
  overflow: hidden;
  position: relative;
}

.container > img {
  position: absolute;
  width: 100%;
  /* height: 100%; */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

장점

• IE(Internet Explorer)에서도 호환된다. (Can I use?)

단점

• < img > 태그를 불필요하게 < div class='container' >와 같은 태그로 한 번 감싸줘야 한다.
• 설정해줘야하는 CSS 속성이 많다.

2. < img > 태그 + object-fit

object-fit 속성을 이용해 이미지의 크기를 조절하는 방법
object-position 속성을 사용해 이미지의 위치를 조절할 수 있다.

object-fit 속성은 < img > 요소나 < video > 요소와 같은 대체 요소의 콘텐츠 크기를 조절하는 속성이다.
object-position 속성을 사용해 대체 요소 콘텐츠가 콘텐츠 박스 내에 위치할 지점을 바꿀 수 있다.

• 출처 - MDN

장점

• object-fit 속성 하나면 간편하게 이미지 크기를 설정할 수 있다.

단점

• IE(Internet Explorer)에서는 지원하지 않는다. (Can I use?)

3. < div > 태그 + background-image: url();

이미지를 < div > 태그에 background-image 속성을 이용해 배경 이미지로 삽입하는 방법이다.
background-size 속성으로 크기를 조절한다.
background-position 속성을 이용해 이미지의 위치 조정이 가능하다.

장점

• IE(Internet Explorer)에서도 호환된다. (Can I use?)

단점

아래의 단점은 이미지가 콘텐츠가 아닌 꾸미는 용도인 배경 이미지로 삽입하려는 의도였다면 무관하다.

• 이미지를 삽입한 것인데 < img > 태그를 사용할 수 없어 UX나 SEO, 웹 접근성 측면에서 좋지 않다.
  + UX의 경우, < img > 태그에서 지원되는 이미지 복사 및 저장 기능을 사용할 없고 drag and drop 기능도 적용되지 않는다.
  • SEO나 웹 접근성 측면에선, 이미지가 < div > 태그로 인식되기 때문에 시맨틱한 마크업이라고 볼 수 없다.