[CSS] div 안에 이미지 꽉 채우기

<GridBox1>
    <Imgdiv>
        <BookImg></BookImg>
    </Imgdiv>
<GridBox1>

const GridBox1 = styled.div`
`;

const Imgdiv = styled.div`
    width: 228px;
    height: 299px;
    margin: 25px;
    margin-bottom: 3px;
`;

const BookImg = styled.img`
    background-image: url("https://image.aladin.co.kr/product/2584/37/coversum/8998441012_3.jpg");
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size : cover;
    /* border: transparent; */
    /* object-fit:cover; */
`;

알라딘 도서 api를 사용하여 프론트를 만들던 중 이미지를 불러와야할 일이 생겼다.

이 div칸을 이미지로 채우고 싶었다. 그래서 background-image: url("~~");로 이미지를 가져왔다.

const BookImg = styled.img`
    background-image: url("https://image.aladin.co.kr/product/2584/37/coversum/8998441012_3.jpg");
    width: 100%;
    height: 100%;
`;

반복되는 이미지를 하나만 띄우고 싶었다.

background-repeat: no-repeat;

background-repeat: no-repeat;을 추가했더니 원래 이미지 파일의 크기대로 떴다. 하지만 꽉 채워야하지 않겠는가.

background-size : contain;

그래서 이 코드를 써줬다. 근데 내가 원하는 크기에 살짝 모자랐다. 나는 꽉 채우고 싶었다. 

background-size : cover;

background-size : cover;를 추가했더니 이미지가 알맞게 표시되었다. 원래 알라딘 자체에서 오는 이미지 픽셀이 작아서 많이 깨지긴한다.

 

참고 자료

https://hianna.tistory.com/724#t41