개발일지 42 - 좋아요 버튼 이미지로 바꾸기..4

이미지를 바꾸는 문제는 잘 해결했는데 이미지가 버튼의 사이즈에 맞지 않는 문제가 발생했다. 

 

그래서 이미지 자체를 resize하면 된다고 생각해서 코랩에 들어가서 아래와 같이 코드를 짰다.

 

from PIL import Image
import matplotlib.pyplot as plt

# 이미지 경로
image_path1 = '/content/sample_data/like_button.png'
image_path2 = '/content/sample_data/liked_button.png'
image1 = Image.open(image_path1)
image2 = Image.open(image_path2)

new_size = (100, 50)  # 예시: 100x100 픽셀
resized_image = image1.resize(new_size)

resized_image.save('resized_like_button.png')

plt.imshow(resized_image)
plt.axis('off')  # 축 숨기기
plt.show()

 

기존의 이미지 사이즈를 100px,50px로 줄여서 저장해서 출력하여 이미지를 사용하려고 했다. 

 

그렇게 새로 만든 이미지를 css 코드에 넣었다.

 

 .like-btn{
        background-image:url('/like_button_resize.png');
        ....
    }

하지만 이미지가 자꾸 이상하게 출력이 되고 내가 원하는 부분의 이미지가 뜨지 않았다.

 

그러다 갑자기 css에 그냥 이미지를 버튼 크기에 맞게 조정하는 방법이 있지 않나 싶어서 찾아봤더니 

 

있었다..

 

.like-btn{
        background-image:url('..../like_button.png');
        background-size: cover; /* 이미지가 버튼 크기에 맞게 조정 */
        background-position: center;

 

 바보같이 resize로 사이즈 조절할 필요 없이 위의 코드로 이미지를 버튼 크기에 맞게 조절하면 잘 실행된다.