PyQt5 | How to adjust the image inside Push Button ?

When we set image to a push button we see that if the push button size is smaller than the image then image will get cropped. In this article we will see how we can retain the actual size of the image.

There are two ways to do this :

-> Change the size of Push Button according to the size of image.
-> Instead of using background image use image as a skin.

Note : In first way, push button size may or may not be changed. It depends on the image size and in second way no change will occur to push button size.

Method #1 : Changing the size of button.



Code :

filter_none

edit
close

play_arrow

link
brightness_4
code

# importing libraries
from PyQt5.QtWidgets import * 
from PyQt5.QtGui import * 
from PyQt5.QtCore import * 
import sys
  
  
class Window(QMainWindow):
    def __init__(self):
        super().__init__()
  
        # setting title
        self.setWindowTitle("Python ")
  
        # setting geometry
        self.setGeometry(100, 100, 1000, 800)
  
        # calling method
        self.UiComponents()
  
        # showing all the widgets
        self.show()
  
    # method for widgets
    def UiComponents(self):
  
        # creating a push button
        button = QPushButton("CLICK", self)
  
        # setting geometry of button
        button.setGeometry(10, 15, 100, 40)
  
        # adding action to a button
        button.clicked.connect(self.clickme)
  
        # setting background image
        button.setStyleSheet("background-image : url(image.png);")
  
        # resizing button according to size of image
        button.resize(724, 430)
  
    # action method
    def clickme(self):
  
        # printing pressed
        print("pressed")
  
# create pyqt5 app
App = QApplication(sys.argv)
  
# create the instance of our Window
window = Window()
  
# start the app
sys.exit(App.exec())

chevron_right


Output :

Note: This method is not preferable if image size is to large.
 

Method #2 : Setting image as a skin.

Code :

filter_none

edit
close

play_arrow

link
brightness_4
code

# importing libraries
from PyQt5.QtWidgets import * 
from PyQt5.QtGui import * 
from PyQt5.QtCore import * 
import sys
  
  
class Window(QMainWindow):
    def __init__(self):
        super().__init__()
  
        # setting title
        self.setWindowTitle("Python ")
  
        # setting geometry
        self.setGeometry(100, 100, 600, 400)
  
        # calling method
        self.UiComponents()
  
        # showing all the widgets
        self.show()
  
    # method for widgets
    def UiComponents(self):
  
        # creating a push button
        button = QPushButton("CLICK", self)
  
        # setting geometry of button
        button.setGeometry(100, 150, 100, 40)
  
        # adding action to a button
        button.clicked.connect(self.clickme)
  
        # setting image as skin
        button.setStyleSheet("border-image : url(image.png);")
  
  
    # action method
    def clickme(self):
  
        # printing pressed
        print("pressed")
  
# create pyqt5 app
App = QApplication(sys.argv)
  
# create the instance of our Window
window = Window()
  
# start the app
sys.exit(App.exec())

chevron_right


Output :

Note : This method is not preferable if image shape is not as of button.

Attention geek! Strengthen your foundations with the Python Programming Foundation Course and learn the basics.

To begin with, your interview preparations Enhance your Data Structures concepts with the Python DS Course.




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.