如何根据图片尺寸来改变容器大小
来源:互联网 发布:hbuilder mac版下载 编辑:程序博客网 时间:2024/05/05 22:16
有时候需要在前端显示图片信息,但由于加载到的图片不知道大小尺寸,使容器不能设置准确的尺寸来显示图片。那么我们该如何获取图片的大小呢?
提供两种思路:
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,...) { 方法体}方式作为方法调用。
0 0
- 如何根据图片尺寸来改变容器大小
- 改变图片尺寸大小不改变像素
- IOS 改变图片尺寸和大小方法
- 利用 matlab 批量改变图片尺寸大小
- 使用 Device Mapper来改变Docker 容器的大小
- 使用 Device Mapper来改变Docker 容器的大小
- 使用 Device Mapper来改变Docker 容器的大小
- Java 如何动态改变改变组件大小(更随窗口) 和 根据窗口大小改变程序窗口大小f
- 如何根据DPI来动态调整窗口或控件大小?
- 如何根据电流的大小来选择取样电阻
- 3.8如何编程来改变视图的大小和位置?
- 根据屏幕大小改变div
- 根据容器大小设置字体
- C#根据窗体大小改变控件大小
- 如何改变数组大小?
- 如何让图片尺寸按照比例自适应屏幕大小
- 根据Url 获取图片尺寸
- Jquery根据浏览器窗口改变调整大小
- SharedPreference 工具类
- Android中的第一个NDK的例子
- ZooKeeper典型应用场景一览
- jvm 内存模型与线程 & Volatile
- 基于vlc的ActiveX流媒体播放器的二次开发流程
- 如何根据图片尺寸来改变容器大小
- android 自定义Dialog Style基本设置
- java 实现Ping功能
- View 绘制流程
- 闹钟设置
- UVA 10230
- 【leetcode】24. Swap Nodes in Pairs
- pthread_cancel用法及常见问题
- java设计模式之策略模式