css图片根据div宽高比例自适应
1.div布局
<div class="card-img-show">
<div class="upload-img-conss" >
<img style="width: 200px" class="addPersonFile" id="personImg" :src="personImgDataUrl" >
<div class="upload-img-success-bg">
<div class="upload-promise-img-chuan-margin">
</div>
<p class="upload-img-add-front" style="margin-top: 11px; padding-left: 0">证件有效信息面</p>
</div>
</div>
<div class="card-img-show">
<input style="position: absolute; width: 52%; height: 73%" class="register-person-260-upload" :class="{'is-danger': errors.has('cardImg') }" v-validate="'required|unitCardImg'" name="cardImg" type="file" id="addPersonFile" v-on:change="getFile($event)"
placeholder="请上传证件照">
<p v-show="errors.has('cardImg')" style="display:none;color: red;font-size: 12px;">{{ errors.first('cardImg') }}</p> <p class="card-img-show-p">文件格式为:jpg或png;文件大小:1M至5M</p>
</div>
</div>
效果图
根据图片原始尺寸等比缩放,不拉伸图片宽高;
前端使用vue框架:图片上传完成后渲染
updated(){
$(".register-container img").each(function(){
if(!!$(this).attr("src") && $(this).attr("src").indexOf("http")>-1){
var imgid= $(this).attr("id")
//添加遮罩可忽略
$("#"+imgid+"+ div:first").addClass("upload-img-success-bg-change");
//图片id
var img = $(this);
//图片自适应宽高
imgSuite(imgid,img);
}
});
},
公共js方法
function imgSuite(imgid,img) {
var realWidth;//真实的宽度
var realHeight;//真实的高度
//虚拟img标签
$("<img/>").attr("src", $(img).attr("src")).on('load',function() {
realWidth = this.width;
realHeight = this.height;
var upPercent = realWidth/realHeight;
var parentDiv = $("#"+imgid).parent();
var parentWidth = parentDiv.width();//父级宽
var parentHeight = parentDiv.height();//父级高
var orgPercent = parentWidth/parentHeight;
if(upPercent<orgPercent){
$("#"+imgid).css({width:"auto",height:parentHeight+"px",margin:"0 auto",display:"block"});
}else {
var differHeight = parentWidth*realHeight/realWidth;//父级高度减去图片高度差
var marginTop = (parentHeight - differHeight)/2;//距离顶部高
$("#"+imgid).css({height:"auto",width:parentWidth+"px",marginTop: marginTop + "px",display:"block"});
}
});
}
css图片根据div宽高比例自适应的更多相关文章
- css实现左边定宽右边自适应的5种方法总汇
在网页布局中,通常需要实现左边定宽右边自适应布局,默认html的结构如下: <div class="box"> <div class="left&quo ...
- css布局:定宽,自适应
css三栏布局:1.中自:float,absolute,margin三种方法.2.中固:margin,table两种方法. 两边定宽,中间自适应: float: #left{ float:left; ...
- jq获取图片的原始尺寸,自适应布局
原理: each()遍历,width().height()获取宽高, load() 注意: 由于页面加载完了,但图片不一定加载完了,所以直接通过 $("img").width(), ...
- UIImageView圆角,自适应图片宽高比例,图片拉伸,缩放比例和图片缩微图
/* 设置圆角,通过layer中的cornerRadius和masksToBounds即可. 自适应图片宽高比例.通过UIViewContentModeScaleAsp ...
- 【CSS】318- CSS实现宽高等比自适应容器
点击上方"前端自习课"关注,学习起来~ 在最近开发移动端页面,遇到这么一个情况:当页面宽度 100% 时,高度为宽度一半,并随手机宽度变化依然是一半. 于是我们就需要实现一个宽度自 ...
- 漂亮的自适应宽度的多色彩CSS图片按钮
一.素材 二.效果 三.CSS *{padding:0;margin:0} /*----------------------------------- 自适应宽度图片按钮 ...
- 从零开始学习前端开发 — 7、CSS宽高自适应
一.宽度自适应 语法:width:100%; 注: a)块状元素的默认宽度为100% b) 当给元素设置宽度为100%时,继承父元素的宽度 c) 通常使用宽度自适应实现通栏效果 二.高度自适应 语法: ...
- 纯Css实现Div高度根据自适应宽度(百分比)调整
在如今响应式布局的要求下,很多能自动调整尺寸的元素能够做到高宽自适应,如img,通过{width:50%;height:auto;}实现图片高度跟随宽度比例调整. 然而,用的最多的标签一哥Div却不能 ...
- 使用CSS让元素尺寸缩小时保持宽高比例一致
CSS中有一个属性padding对元素宽度存在依存关系.如果一个元素的 padding属性以百分比形式表示,padding 的大小是以该元素自身宽度为参照的. 若想要元素尺寸变化时,宽高比例不变,可以 ...
随机推荐
- C# WINFORM 编程中,选择**文件夹**而不是文件的方法(转)
我们选择文件可以用 OpenFileDialog ,但是文件夹有两种方法. 法一: 用C#的FolderNameEditor类的子类FolderBrowser类来实现获取浏览文件夹对话框的功能.下面来 ...
- Confluence 6 安装 PostgreSQL
如果你的系统中还没有安装 PostgreSQL 数据库,你需要先下载后进行安装. 在安装 PostgreSQL 时候的一些小经验: 在安装的时候提供的 密码(password )是针对 'postg ...
- mysql where和having的区别
简单描述:需要查询一个数量count,于是做分组查询后,发现有的数据没有过滤掉,于是就想加上过滤条件,就在group by后边写了where ,发现不好使,直接就报错了,查了一下,where只能写在g ...
- 常用的Eclipse 快捷键
显示所有快捷方式 SHIFT + CTRL + L 代码类 ALT + / 代码补全 ALT + 1 批量修改变量名 SHIFT + CTRL + F 自动格式代码4 SHIFT + ALT + R ...
- PDF编辑方法,PDF怎么去除背景
PDF文件现在是使用的频率很高的一个软件的格式,PDF文件能够更加直观清楚的表达,PDF文件的使用很方便但编辑起来就来没有那么容易了,PDF文件的编辑是需要借助软件的,今天小编就来跟大家分享一下PDF ...
- Web前端渗透测试技术小结(一)
首先端正一下态度不可干违法的事 1.SQL注入测试 对于存在SQL注入的网页,使用SQL语句进行关联查询(仿照C/S模式)eg http://www.foo.com/user.php?id=1 常 ...
- JS去除空格和换行的正则表达式(推荐)
//去除空格 String.prototype.Trim = function() { return this.replace(/\s+/g, ""); } //去除换 ...
- Python中什么是深拷贝和浅拷贝且有什么区别
浅拷贝: >>> a = [1, 2, 3] >>> b = a >>> a [1, 2, 3] >>> b [1, 2, 3] ...
- C和Java判断一个数字是否为素数
C: /* 素数: 素数又称质数.所谓素数是指除了 1 和它本身以外,不能被任何整数整除的数,例如17就是素数,因为它不能被 2~16 的任一整数整除. */ # include <stdio. ...
- Left-pad
L1-032 Left-pad (20 分) 根据新浪微博上的消息,有一位开发者不满NPM(Node Package Manager)的做法,收回了自己的开源代码,其中包括一个叫left-pad的 ...