1. background
background size
배경으로 들어갔을 때만 사용 가능
- contain : 이미지의 가로세로 비율을 유지하면서, 이미지가 잘리지 않을 때까지만 채운다.
- cover : 이미지의 가로세로 비율을 유지하면서, 이미지가 잘리더라도 주어진 크기를 꽉 채운다.
- 사이즈 직접 입력 : (100%, 200px, 50em 등) 비율 무관, 입력한 값에 따른다.
background-position
background-position: top;
background-position: bottom;
background-position: center;
background-position: left;
background-position: right;
background-position: 25% 75%;
background-position: 10px 20px;
2. object
<img>, <video>, <object>, <svg> 과 같은 요소의 지정된 너비와 높이를 지정
object-fit
화면의 정가운데 정렬 (50%, 50%)
- fill : 채우기 (기본값)
- contain : 비율 유지 + 전체이미지 출력으로 인해 빈공간 생김.
- cover : 비율 유지&채우기 + 오버사이즈는 잘림.
- none : 이미지 크기를 조절하지 않음.
- scale-down : none과 contain 중 이미지의 크기가 더 작아지는 값에 따름.
object-position
이미지 정렬 위치 지정
- 가로 left, center, right
- 세로 top, center, bottom
- 수치로도 값을 줄 수 있다.
3. position
position: absolute
컨테이너 박스 안의 이미지 태그의 스타일을 position: absolute 로 띄운 다음, 컨테이너에게 overflow: hidden 을 줘서 넘치는 부분을 자르는 방식
- 이미지를 가운데 정렬하기 위해 top, left, transform 속성이 추가로 필요.
- 예전에 IE에서 object-fit이 먹히지 않을 때 대체해서 사용하던 방법이었다.
.container {
width: 200px;
height: 150px;
overflow: hidden; /* 넘치는 이미지를 가린다 */
}
.container > img {
position: absolute;
width: 100%;
/* 이미지 위치 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
