如何根据图片尺寸来改变容器大小

时间:2022-11-16 16:53:06

有时候需要在前端显示图片信息,但由于加载到的图片不知道大小尺寸,使容器不能设置准确的尺寸来显示图片。那么我们该如何获取图片的大小呢?

提供两种思路:

1.在请求图片资源时由后台来解析加载图片的尺寸并返回;

2.忽略图片的实际尺寸,固定容器大小,然后设置图片的样式:宽、高100%,这样它就会以容器的大小自动缩放。如果想改变已经显示的图片大小,那就将容器设置为可变尺寸。

我将第2种方式作为示例:

先看代码

var url = '请求地址';//可以直接是一个图片地址,也可以是请求的某个接口方法
Ext.create('Ext.Window', {
    title: '显示',
    modal: true,
    //resizable: false,
    width: 600,
    height: 400,
    html: "<img src='" + url + "' style='position:absolute;left:0px;top:0px;width:100%;height:100%;'/>"
}).show();
这里是用Window作为图片的容器,设置的固定大小宽600,高400,

然后注意第5、8行的内容,

配置项‘resizable’表示可变尺寸的、可调整大小的,当设置为false时,不可改变(默认true),这里为了需求我们需要将其设置为可变,默认即可。

配置项‘html’表示一个HTML片段,用了一个img标签来显示图片,请求的src就是我们提供的url,然后设置样式style。注意‘width: 100%;height:100%;’一定要写,表示图片会以容器大小自动缩放比例。

配置项‘modal:true’表示它是一个模式对话框。


当然,如果不想用弹出窗口的方式来显示图片,也可以用其他容器来处理。

这里写的是方法体,可以用

function methodName(参数1,...) {
        方法体
}
methodName = function(参数1,...) {
        方法体
}
方式作为方法调用。