python - Set the width and height of a pygame surface

Question

I am creating my own GUI library with pygame. I have a UIComponent class that creates the UI elements. The UI element itself is created through self.image with width and height. The problem with this is that changing the width and height doesn't seem to work. I'm using self.rect.x to modify its coordinates but when I tried using self.rect.width it didn't have an effect.

ui_elements = pg.sprite.Group()


class UIComponent(pg.sprite.Sprite):

    def __init__(self, width, height):
        pg.sprite.Sprite.__init__(self)
        self.width_percent, height_percent = 0, 0
        self.alignments = []
        self.image = pg.Surface((width, height))
        self.rect = self.image.get_rect()
        ui_elements.add(self)

    def set_colour(self, colour_value):
        self.image.fill(colour_value)

    def update(self, win):
        for i in self.alignments:
            i(win)

    def center_x(self, win):
        self.rect.x = (win.s_width/2)-self.image.get_width()/2

    def center_y(self, win):
        self.rect.y = (win.s_height/2)-self.image.get_height()/2

    def relative_width(self, win):
        self.rect.width = 25

    def relative_height(self, win):
        self.rect.height = 25

Answer 1

Changing the width and height of the self.rect attribute does effect the size of the pygame.Surface. Even if a rectangle is passed to the dest argument of pygame.Surface.blit, only the position of the rectangle is considered when the surface is _blit__ onto the target surface.
You have to scale the original image to the desired size by either pygame.transform.scale or pygame.transform.smoothscale.
Keep the original image (self.original_image) and create a scaled image when the size the width or height is changed:

self.image = pygame.transform.smoothscale(self.original_image, self.rect.size)

Class UIComponent:

class UIComponent(pg.sprite.Sprite):

    def __init__(self, width, height):
        pg.sprite.Sprite.__init__(self)
        self.width_percent, height_percent = 0, 0
        self.alignments = []
        self.original_image = pg.Surface((width, height))
        self.image = self.original_image
        self.rect = self.image.get_rect()
        ui_elements.add(self)

    def set_colour(self, colour_value):
        self.image.fill(colour_value)

    def update(self, win):
        for i in self.alignments:
            i(win)

    def center_x(self, win):
        self.rect.x = (win.s_width/2)-self.image.get_width()/2

    def center_y(self, win):
        self.rect.y = (win.s_height/2)-self.image.get_height()/2

    def relative_width(self, win):
        self.rect.width = 25
        self.image = pygame.transform.smoothscale(self.original_image, self.rect.size)

    def relative_height(self, win):
        self.rect.height = 25
        self.image = pygame.transform.smoothscale(self.original_image, self.rect.size)