<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. XUtils框架中HttpUtils使用Get请求时总是返回相同信息的问题解决,xutilshttputils

    如需转载请标明出处:http://blog.csdn.net/itas109 版本:Xutils 2014年11月11日 下载地址:https://github.com/wyouflf/xUtils ...

  2. python_列表

    1.  列表的定义 (1) 用[]包含的元素,就是列表 (2)可以用list函数定义列表 2.  基本的列表操作(可参考示例) (1)元素赋值 (2)删除元素 (3)分片赋值 3. 列表方法 (1) ...

  3. Demo3使用bootstrap

    利用Ajax实现信息获取,使用bootstrap来美化页面,果然很强大. 将bootstrap的API添加到引用.如图程序源码结构: 页面源码: <!DOCTYPE html PUBLIC &q ...

  4. javascript设计模式学习之五——策略模式

    一.策略模式定义: 定义一些列的算法/规则,将它们封装起来,使得它们可以互相替换/组合使用.其目的在于将算法/规则封装起来,将算法/规则的使用与实现分离出来. 通过策略模式,可以减少算法计算过程中大量 ...

  5. Map的基本用法(Java)

    package home.collection.arr; import java.awt.Window.Type; import java.util.ArrayList; import java.ut ...

  6. iOS SQLite增删改查(简单应用)

    // 注意: 在工程里导入libsqlite3.tbd库(Xcode7,如果Xcode7以下的版本则导入libsqlite3.dylib). #import <UIKit/UIKit.h> ...

  7. spring4 文件下载功能

    需要准备的工具和框架 Spring 4.2.0.RELEASE Bootstrap v3.3.2 Maven 3 JDK 1.7 Tomcat 8.0.21 Eclipse JUNO Service ...

  8. Megacli查看raid磁盘信息

    准备: 新版本的 MegaCli-1.01.24-0.i386.rpm (下载地址:http://www.lsi.com/downloads/Public/MegaRAID%20Common%20Fi ...

  9. Simple GDB case

    to be added...   gdb a.out   [Inferior 1 (process 9718) exited with code 05] (gdb) list Line number ...

  10. 数据库调优过程(一):SqlServer批量复制(bcp)[C#SqlBulkCopy]性能极低问题

    背景 最近一段给xx做项目,这边最头疼的事情就是数据库入库瓶颈问题. 环境 服务器环境:虚拟机,分配32CPU,磁盘1.4T,4T,5T,6T几台服务器不等同(转速都是7200r),内存64G. 排查 ...