How to fix strected image label in a layout?

Rangerguy128

I've been working for a main window lately through QT Designer, and I've been wondering to know on how I can fix the image's layout? This si what it looks like:

The map looks too stretched out and I was looking any other way to atleast center the image as an alternative but appearantly, you can't change the geomatry of the label when it's inside a layout. Any tips? Perhaps I have to change something in the .py file instead?

mpergand

@Rangerguy128

Here a class that draws an image respecting the image ratio:

class ImageView : public QWidget
{
    public:

        ImageView(const QString& filepath)
            {
            if(!_img.load(filepath))
                {
                qDebug()<<"Image not loaded"<<filepath;
                }
            }

    private:

    void paintEvent(QPaintEvent* )
            {
            QPainter painter(this);
            QSize imgSize=_img.size();
            QSize viewSize=rect().size();
            int width=imgSize.width();
            int height=imgSize.height();

            // resize only if img size > view size
            if((imgSize.width()>viewSize.width()) || (imgSize.height()>viewSize.height()))
                {
                float ratio=imgSize.width()/(float)imgSize.height();
                width=viewSize.width();
                height=width/ratio;

                if(height>viewSize.height())
                    {
                    height=viewSize.height();
                    width=height*ratio;
                    }
                }

			// center the image
            int mx=viewSize.width()-width;
            int my=viewSize.height()-height;
            painter.drawPixmap(QRect(mx/2,my/2,width,height),_img,QRect(QPoint(0,0),imgSize));
            }

    QPixmap _img;

};

But there's a property of QLabel that maybe does the same thing:

scaledContents : bool
This property holds whether the label will scale its contents to fill all available space.
When enabled and the label shows a pixmap, it will scale the pixmap to fill the available space.
This property's default is false.
Access functions:

bool
hasScaledContents() const
void
setScaledContents(bool)

Bonnie

If you need to scale the image according to the size of the label (scaledContents=true), then you can't center the image without writing codes.
If not, then it can be done in the designer by setting the alignment.

Rangerguy128

@mpergand said in How to fix strected image label in a layout?:

But there's a property of QLabel that maybe does the same thing

@Bonnie said in How to fix strected image label in a layout?:

If you need to scale the image according to the size of the label (scaledContents=true), then you can't center the image without writing codes.
If not, then it can be done in the designer by setting the alignment.

Like this? I already have it on but still nothing changed.

Bonnie

@Rangerguy128 said in How to fix strected image label in a layout?:

Like this? I already have it on but still nothing changed.

Yes, because your scaledContents is true, as I said.
When scaledContents is false, the image is shown in actual size, so you will only see the difference when the image size is smaller than the label size.

Rangerguy128

@Bonnie Is it possible to enable scaledcontents only when the window appears but its set to false when stretching/expanding the window?

JonB

@Rangerguy128
Yes. Anything you see in Creator/Designer can be done dynamically at runtime through code if you wish. In this case https://doc.qt.io/qt-6/qlabel.html#scaledContents-prop.

Bonnie

@Rangerguy128
Yes, as @JonB replied above (also need to write codes). But I don't see that makes any sense.
When you change scaledcontents to false, it won't keep the image size when it is true, it just show the actual size.
So if you are not going to keep the image in its actual size, you need to write codes as @mpergand shows you.