Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

[PyQt5] KeepAspectRatio ans StyleSheet



  • Hi,
    I am designing my own widget and I am looking for a way to keep the aspect ratio of an image I included using setStyleSheet.

    My widget is a QWidget, I set the background color and an image that fills the widget using setStyleSheet and border-image.

    self.setStyleSheet("height: auto;background-color: "+color+" ;border-image:url("+self.img+"); ")
    

    Then a Qlabel is set above the image using setWordWrap(True) and a QVBoxLayout.

    Thank you for your help


  • Lifetime Qt Champion



  • HI @jsulm

    I am not sure this is what I am looking for.
    I am to keep the aspect ratio of the image inside the widget, not the aspect ratio of the widget.

    Here is more details about my code

    import sys
    from PyQt5.QtWidgets import QLabel, QApplication, QWidget, QVBoxLayout
    from PyQt5.QtCore import Qt
    
    class MyWidget(QWidget):
        
        def __init__(self, text, image, color):
            QWidget.__init__(self)
            
            self.setMinimumSize(100, 100)
            self.img = image
            self.setStyleSheet("height: auto;background-color: "+color+" ;border-image:url("+self.img+"); ")
            vbox = QVBoxLayout()
            self.label = QLabel(self)
            self.label.setText(text)
            self.label.setStyleSheet("font: 18pt; color: white;")
            self.label.setAlignment(Qt.AlignCenter)
            self.label.setWordWrap(True)
            vbox.addWidget(self.label)
            self.setLayout(vbox)
        
        def set_text(self,text):
            "modifier le texte"
            self.label.setText(text)
            
        def set_color(self,color):
            "change la couleur"
            self.setStyleSheet("height: auto;background-color: %s ;" + "border-image:url(%s);" %color %self.img)
            
    
    def window():
        app = QApplication(sys.argv)
        win = MyWidget("Hello","image.svg","green")
        win.show()
        sys.exit(app.exec_())
    
        
    if __name__ == '__main__':
       window()
    
    


  • If you can help me, I am really stucked with this :(


  • Lifetime Qt Champion

    @anto1ne If you keep aspect ratio of the widget then you keep aspect ration of the image in that widget also.


  • Banned

    Okay I ran this code and when you resize the window everything resizes appropriately from what I can tell. Are you saying when someone resizes the window you want its height equal to its width or at least maintain a preset ratio?

    Also while the changes I made do not affect functionality they do help with readability so thought I would share that with you as well.

    from PyQt5.QtCore    import Qt
    from PyQt5.QtWidgets import QLabel, QApplication, QWidget, QVBoxLayout
    
    class MyWidget(QWidget):
        def __init__(self, text, image, color):
            QWidget.__init__(self)
            
            self.setMinimumSize(100, 100)
            self.img = image
            self.setStyleSheet("height: auto;background-color: "+color+" ;border-image:url("+self.img+"); ")
    
            self.label = QLabel(self)
            self.label.setText(text)
            self.label.setStyleSheet("font: 18pt; color: white;")
            self.label.setAlignment(Qt.AlignCenter)
            self.label.setWordWrap(True)
    
            vbox = QVBoxLayout()
            vbox.addWidget(self.label)
    
            self.setLayout(vbox)
        
        def set_text(self, text):
          # modifier le texte
            self.label.setText(text)
            
        def set_color(self, color):
          # change la couleur
            self.setStyleSheet("height: auto;background-color: %s ;" + "border-image:url(%s);" %color %self.img)
            
    if __name__ == '__main__':
        MainEvntHndlr = QApplication([])
    
        MainApp = MyWidget("Hello","Mountains.jpg","green")
        MainApp.show()
    
        MainEvntHndlr.exec()
    
      # If anyone wants more extensive free help I run an online lab-like classroom-like 
      # message server feel free and drop by you will not be able to post until I clear 
      # you as a student as this prevents spammers so if interested here is the invite
      # https://discord.gg/3D8huKC
    


  • Hi

    @jsulm , @Denni-0 : thank you for your help

    Maybe, my explanation is not clear.
    I mean that I want to keep the aspect ratio of the picture inside the widget

    Here is an example :

    When I display the widget for the first time

    1.png

    and once I resized the widget

    this is not really sexy, that is why I want the aspect ratio of the picture to remain the same

    2.png


  • Lifetime Qt Champion


  • Banned

    Note what I am stating is pure pseudo-code you will need to translate that into actual code

    That is one way but I believe you can also set your Windows Width = Height as a setting and/or via code on resize such that it maintains the proper scale.

    For instance if its a square Win.Width = Win.Height is basically all you need

    If its say 20% taller than it is wide then Win.Width = (Win.Height * 0.8) and so -- just figure out your aspect ratio and implement it for the window itself otherwise the image will not fill the entire window as you would like.


Log in to reply