html中居中显示图片(在html中让图片居中)

蓝字关注我们

微信公众号:OpenCV开发者联盟

关注获取更多计算机视觉与深度学习知识

引言

俗话说 “一图胜千言”,我们第一个PyQT5界面程序实现图像加载与显示功能,肯定可以激发兴趣,吸引开发者更进一步的往下探索PyQT5开发。况且我们现在身处于一个图像与视频时代,周围所有的信息都在以图像或者视频方式呈现,作为界面开发者我们必须掌握PyQT5通过图像方式展示信息的相关函数与编程技巧。

QLabel组件介绍

这是多数开发者学习PyQT5接触到第一个组件元素,通过它可以显示文本(中英文)、图像或者视频。它支持各种对齐方式、支持标签大小、前景文字颜色、背景颜色等各种属性设置,支持HTML CSS语法的自定义风格设置。

在PyQT5中创建一个QLabel组件相当的简单,代码如下:

html中居中显示图片(在html中让图片居中)

label = QLabel

QLabel最重要的两个成员函数一定要知道:

setText(arg0)

setPixmap(arg0)

分别是设置文本与图像显示。此外开发中经常会用到其他属性设置函数包括以下几个:

setAlignment

setFont

setStyle

setStyleSheet

等几个函数。其它函数可以直接查询官方文档获取说明。

QLabel显示文本

在上一篇文章中我们创建了一个最简单的PyQT5界面程序:

2023年Python GUI桌面应用开发该选哪个库

现在我们就为这个最简单PyQT5应用程序添加上文字显示,生成一个Hello World版本的PyQT5界面程序。首先看一下运行的结果:

代码实现如下:

from PyQt5 import QtWidgets , QtCore

import sys

# 初始化APP实例

app = QtWidgets . QApplication ( sys . argv )

label = QtWidgets . QLabel

font = label . font

font . setPixelSize ( 32 )

label . setFont ( font )

label . setText ( "Hello World, PyQT5开发..." )

label . setAlignment ( QtCore . Qt . AlignCenter )

# 初始化桌面容器

main_win = QtWidgets . QMainWindow

# 设置APP窗口名称

main_win . setWindowTitle ( "第一个PyQT5程序" )

# 设置窗口大小

main_win . setMinimumSize ( 640 , 480 )

main_win . setCentralWidget ( label )

# 请求显示

main_win . show

# 加载窗口并启动App

app . exec

其中QtCore.Qt.AlignCenter表示文本在QLabel上居中对齐显示。

QLabel显示图像

在PyQT5中图像有两种数据对象表示分别是QImage与QPixmap,QLabel通过setPixmap函数设置要显示的QPixmap图像对象,QPixmap支持通过文件路径直接加载图像初始化为QPixmap对象。对于不同大小的图像,有两种方法可以适配窗口大小显示,第一种是自动填满整个QLabel;第二种方式根据保持图像比率自动缩放居中显示图像,在实际开发中一般都会选择第二种方法。两种图像显示方法的设置代码如下:图像自动填满QLabel方式:

label.setScaledContents

根据指定窗口实际大小,自动保持比率放缩方式:

pix= pixmap.scaled(QtCore.QSize( 620, 500), QtCore.Qt.KeepAspectRatio)

更新与显示图像到QLabel上

label.setPixmap( pix)

这一行代码即可。其它显示文本相同。

运行结果如下:

相关的代码如下:

from PyQt5 import QtWidgets , QtCore , QtGui

import sys

# 初始化APP实例

app = QtWidgets . QApplication ( sys . argv )

label = QtWidgets . QLabel

pixmap = QtGui . QPixmap ( "test3.png" )

pix = pixmap . scaled ( QtCore . QSize ( 620 , 500 ), QtCore . Qt . KeepAspectRatio )

label . setPixmap ( pix )

label . setAlignment ( QtCore . Qt . AlignCenter )

# 初始化桌面容器

main_win = QtWidgets . QMainWindow

# 设置APP窗口名称

main_win . setWindowTitle ( "OpenCV开发者联盟 - PyQT5图像显示" )

# 设置窗口大小

main_win . setMinimumSize ( 640 , 500 )

main_win . setCentralWidget ( label )

# 请求显示

main_win . show

# 加载窗口并启动App

app . exec

总结

本文介绍了通过PyQT5的QLabel组件实现文本与图像显示、对齐、字体大小、与自动按比率放缩图像等属性设置,学习PyQT5界面显示文本与图像基本函数操作。

系统化学习PyQT5+OpenCV

桌面应用程序与嵌入式应用程序

请持续关注我们的专栏!

OpenCV开发者联盟,

专注各种语言的OpenCV开发教程分享

OpenCV周边开发技术应用!

扫码查看OpenCV+OpenVIO+Pytorch系统化学习路线图

CV全栈开发者说 - 从传统算法到深度学习怎么修炼

2022入坑深度学习,我选择Pytorch框架!

Pytorch轻松实现经典视觉任务

教程推荐 | Pytorch框架CV开发-从入门到实战

OpenCV4 C++学习 必备基础语法知识三

OpenCV4 C++学习 必备基础语法知识二

OpenCV4.5.4 人脸检测+五点landmark新功能测试

OpenCV二值图象分析之Blob分析找圆

OpenCV4.5.x DNN + YOLOv5 C++推理

OpenCV4.5.4 直接支持YOLOv5 6.1版本模型推理

OpenVINO2021.4+YOLOX目标检测模型部署测试

比YOLOv5还厉害的YOLOX来了,官方支持OpenVINO推理

1、本网站名称:源码村资源网
2、本站永久网址:https://www.yuanmacun.com
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
源码村资源网 » html中居中显示图片(在html中让图片居中)

1 评论

您需要 登录账户 后才能发表评论

发表评论

欢迎 访客 发表评论