手机端上传未知图片大小,js设置宽高比例
<style rel="stylesheet" type="text/css">
.lunboimg{ width: 100%; height: auto; float: left;}
.lunboimg img{ width: 100%; float: left;}
</style>
$(function(){
var evt = "onorientationchange" in window ? "orientationchange" : "resize";
window.addEventListener(evt, function () {
location.reload()
}, false); 判定屏幕旋转时,刷新页面,(防止图片获取宽度固定不变,图片不能自适应)
var width =$(window).width(); 获取手机浏览器的宽高
var height=$(window).height();
height=width*0.5; 图片高度=图片宽度的0.2 宽高比:2:1
$("#banner").css({"width":width, "height":height}); 获取缩放后的尺寸
});
<div class="lunboimg">
<img src="img/today.jpg" id="banner" >
</div>
手机端上传未知图片大小,js设置宽高比例的更多相关文章
- ecmall允许上传的图片大小
$uploader->allowed_type($type); $uploader->allowed_size($size); ecmall上传类型大小是这样定义,你可以去文件中搜索相关 ...
- elementUI 上传文件图片大小加了限制后 仍然上传了
https://blog.csdn.net/chanlingmai5374/article/details/80558444 看了这位老哥的说法 在看看文档 才发现自己没认真看文档 <el-u ...
- 上传base64图片并压缩
elementUI+react 布局 <Dialog title="充值" visible={ dialogVisible } onCancel={ () => thi ...
- PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件
PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...
- js 显示刚刚上传的图片 (onchange事件)
<table> <tr width="100"> <td>上传商场图片:</td> <td> <input typ ...
- ext js/Ext.Net_演示 htmleditor 上传&插入图片
本文内容 解决方案结构 HtmlEditor_Upload.js 脚本 HtmlEditorUploadImg.ashx 上传图片到服务器 演示 htmleditor 控件添加插入图片功能 解决方 ...
- js如何展示上传的图片
前言:本文章主要讲的是上传的图片如何展示在页面上. 一般来说,我们会先将本地图片上传到服务器,上传成功后,由后台返回图片的网络地址再在前端显示.但是,我今天讲的是不通过前面说的过程,而是直接使用js将 ...
- js上传压缩图片
原文链接:http://blog.csdn.net/iefreer/article/details/53039848 手机用户拍的照片通常会有2M以上,这对服务器带宽产生较大压力. 因此在某些应用下( ...
- webform文件上传、图片水印、验证码
文件上传: 所用控件:FileUpload 使用时的思路: 1.判断用户是否选中了文件 FileUpload.FileName获取选中的文件名,判断长度,如果长度大于零就代表已经选择了文件 JS端:通 ...
随机推荐
- javascript设计模式学习之三—闭包和高阶函数
一.闭包 闭包某种程度上就是函数的内部函数,可以引用外部函数的局部变量.当外部函数退出后,如果内部函数依旧能被访问到,那么内部函数所引用的外部函数的局部变量就也没有消失,该局部变量的生存周期就被延续. ...
- QString 和 TCHAR 的相互转换
参考资料: http://www.cnblogs.com/fuyanwen/p/3200536.htmlhttp://www.cnblogs.com/wendao/archive/2012/07/27 ...
- Java基础之在窗口中绘图——显示曲线的控制点(CurveApplet 2 displaying control points)
Applet程序. import javax.swing.*; import java.awt.*; import java.awt.geom.*; @SuppressWarnings("s ...
- PostgreSQL9.1 upgrade to PostgreSQL9.5rc1
PostgreSQL9.1.0 upgrade to PostgreSQL9.5rc1 安装PG9.1端口为5432 [pgup@minion1 pg]$ ls postgresql-9.1.0.ta ...
- navicat 的查询功能
navicat的查询的位置在: 在编辑器界面写代码,代码完成后点左上角的运行. 代码: create(创建) table(一个表) <xxx>尖括号内的内容必填——我要创建并查询一个名叫 ...
- 转:python webdriver API 之下载文件
webdriver 允许我们设置默认的文件下载路径.也就是说文件会自动下载并且存在设置的那个目录中.要想下载文件,首选要先确定你所要下载的文件的类型.要识别自动文件的下载类型可以使用 curl ,如图 ...
- Regist
using (RegistryKey key = Registry.CurrentUser.CreateSubKey(@"Software\Microsoft\Windows\Current ...
- 最新RubyMine2016.2开发Ruby ON Rails(ROR)程序的流程
1.RubyMine新建ROR工程 File->New Project 选择Rails下的"New Application" 点击OK 后生成ROR项目 ...
- 查看真机的系统版本sdk
1.adb devices 确保连接上了真机 2.adb shell 进入android系统 3.进入system目录下 4.查看build.prop文件 cat build.prop
- sql server 查询性能最差的sql语句
SELECT TOP 10 TEXT AS 'SQL Statement' ,last_execution_time AS 'Last Execution Time' ,(total_logical_ ...