CSS 박스안에 이미지를 꼭 맞춰서 넣는 방법

CSS를 처음 배우게 되면 이미지를 내가 원하는대로 넣는 것이 쉽지 않다. 그중에서도 박스의 크기와 이미지의 크기가 서로 다른 경우에는 여기에 맞춰서 넣는 방법을 가장 많이 사용하는데 이것을 한번 배워보자

이 내용은 기초중에서도 왕기초이다. 일단 아래와 같은 HTML 코드가 있다고 가정하자.

<div class="profile">
  <img src="image.jpg">
</div>

CSS 박스안에 이미지 넣는 방법 : 순서

1. 먼저 박스의 크기를 정해준다. width, height
2. css에서 박스를 부모요소로 정하고 기준을 잡기 위해 position: relative를 해준다.
3. 박스를 넘치는 이미지를 보여주지 않기 위해서 overflow: hidden을 해준다.
4. 여기까지가 부모요소(위의 html에서 클래스 profile)의 세팅이다.
5. 이제 자식요소인 img를 박스 안에 넣어야 한다.
6. 먼저 자식요소라는 것을 밝히기 위해 position: absolute를 해준다.
7. 부모요소 기준으로 위치를 잡아준다. top:0, left:0 부모요소인 div 태그의 왼쪽 상단에 이미지를 위치시킨다는 말이다.
8. 이미지의 크기를 정해준다. width:100%, height:100% 부모요소의 100%크기로 꽉 채우라는 말이다.
9. 이미지를 제대로 보여주기 위해 object-fit : cover을 해준다.

CSS 코드로 보면 아래와 같다.

.profile
{
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%; /*둥그런 원으로 만들기 위함*/
  overflow: hidden;
}

.profile img
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

위의 그림과 같이 결과가 나온다. 홈페이지에서 보면 프로필 사진 메뉴 같은 곳에서 많이 사용한다. position의 relative와 absolute의 관계를 알아야 합니다.

position: relative를 하면 아무것도 변하지 않습니다. “나는 내 하위에 있는 position의 부모다” 라고 선언하는 역할을 많이 수행합니다. 이렇게 선언해두면 하위태그에서 position: absolute라고 설정하면 그 태그는 모든 위치를 상위태그(position:relative를 선언한)를 기준으로 잡아서 움직입니다.

즉, 하위태그에서 top:10px; left:20px 이라고 적으면 무작정 화면에서의 상단과 왼쪽이 기준이 아니라 상위태그가 위치한 곳에서부터 아래로 10px, 왼쪽으로 20px움직이는 것입니다.

Position의 relatve와 absolute 이것만 알면 이해됨

위의 링크를 참조하시면 좀 더 이해가 쉬울 것입니다.