[CSS] 박스에 이미지를 딱 맞게 하려면?

 

 

1. 박스 사이즈에 맞게 설정

.image-box {
    margin: 12px 0;
    width: 100%;
    height: 530px;
    overflow: hidden; /* 넘치는 부분 숨기기 */
}

.image-box img {
    width: 100%; /* 이미지를 부모 요소에 맞게 확장 */
    height: auto; /* 가로세로 비율 유지 */
    display: block; /* 인라인 요소로 설정된 이미지를 블록 요소로 변경 */
}

 

 

2. 이미지가 보이는 위치를 조절 

이미지를 정가운데로 조절하려면 아래의 속성을 추가하면 된다.

.image-box {
    ...
    position: relative; /* 부모 요소를 relative로 설정 */
}

.image-box img {
    ...
    position: absolute; /* 이미지를 절대 위치로 설정 */
    top: 50%; /* 부모 요소의 상단에서 50% 떨어진 위치에 */
    left: 50%; /* 부모 요소의 왼쪽에서 50% 떨어진 위치에 */
    transform: translate(-50%, -50%); /* 이미지의 중심을 부모 요소의 중심에 맞춤 */
}