<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设置宽高比例的更多相关文章

  1. ecmall允许上传的图片大小

    $uploader->allowed_type($type); $uploader->allowed_size($size);  ecmall上传类型大小是这样定义,你可以去文件中搜索相关 ...

  2. elementUI 上传文件图片大小加了限制后 仍然上传了

    https://blog.csdn.net/chanlingmai5374/article/details/80558444  看了这位老哥的说法 在看看文档 才发现自己没认真看文档 <el-u ...

  3. 上传base64图片并压缩

    elementUI+react 布局 <Dialog title="充值" visible={ dialogVisible } onCancel={ () => thi ...

  4. PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件

    PHP  多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...

  5. js 显示刚刚上传的图片 (onchange事件)

    <table> <tr width="100"> <td>上传商场图片:</td> <td> <input typ ...

  6. ext js/Ext.Net_演示 htmleditor 上传&插入图片

    本文内容 解决方案结构 HtmlEditor_Upload.js 脚本 HtmlEditorUploadImg.ashx 上传图片到服务器 演示 htmleditor 控件添加插入图片功能   解决方 ...

  7. js如何展示上传的图片

    前言:本文章主要讲的是上传的图片如何展示在页面上. 一般来说,我们会先将本地图片上传到服务器,上传成功后,由后台返回图片的网络地址再在前端显示.但是,我今天讲的是不通过前面说的过程,而是直接使用js将 ...

  8. js上传压缩图片

    原文链接:http://blog.csdn.net/iefreer/article/details/53039848 手机用户拍的照片通常会有2M以上,这对服务器带宽产生较大压力. 因此在某些应用下( ...

  9. webform文件上传、图片水印、验证码

    文件上传: 所用控件:FileUpload 使用时的思路: 1.判断用户是否选中了文件 FileUpload.FileName获取选中的文件名,判断长度,如果长度大于零就代表已经选择了文件 JS端:通 ...

随机推荐

  1. javascript设计模式学习之三—闭包和高阶函数

    一.闭包 闭包某种程度上就是函数的内部函数,可以引用外部函数的局部变量.当外部函数退出后,如果内部函数依旧能被访问到,那么内部函数所引用的外部函数的局部变量就也没有消失,该局部变量的生存周期就被延续. ...

  2. QString 和 TCHAR 的相互转换

    参考资料: http://www.cnblogs.com/fuyanwen/p/3200536.htmlhttp://www.cnblogs.com/wendao/archive/2012/07/27 ...

  3. Java基础之在窗口中绘图——显示曲线的控制点(CurveApplet 2 displaying control points)

    Applet程序. import javax.swing.*; import java.awt.*; import java.awt.geom.*; @SuppressWarnings("s ...

  4. 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 ...

  5. navicat 的查询功能

    navicat的查询的位置在: 在编辑器界面写代码,代码完成后点左上角的运行. 代码: create(创建)  table(一个表) <xxx>尖括号内的内容必填——我要创建并查询一个名叫 ...

  6. 转:python webdriver API 之下载文件

    webdriver 允许我们设置默认的文件下载路径.也就是说文件会自动下载并且存在设置的那个目录中.要想下载文件,首选要先确定你所要下载的文件的类型.要识别自动文件的下载类型可以使用 curl ,如图 ...

  7. Regist

    using (RegistryKey key = Registry.CurrentUser.CreateSubKey(@"Software\Microsoft\Windows\Current ...

  8. 最新RubyMine2016.2开发Ruby ON Rails(ROR)程序的流程

    1.RubyMine新建ROR工程 File->New Project     选择Rails下的"New Application"     点击OK 后生成ROR项目   ...

  9. 查看真机的系统版本sdk

    1.adb devices 确保连接上了真机 2.adb shell 进入android系统 3.进入system目录下 4.查看build.prop文件 cat build.prop

  10. sql server 查询性能最差的sql语句

    SELECT TOP 10 TEXT AS 'SQL Statement' ,last_execution_time AS 'Last Execution Time' ,(total_logical_ ...