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

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

提供两种思路：

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,...) {
        方法体
}

方式作为方法调用。