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宽高比例自适应的更多相关文章

  1. css实现左边定宽右边自适应的5种方法总汇

    在网页布局中,通常需要实现左边定宽右边自适应布局,默认html的结构如下: <div class="box"> <div class="left&quo ...

  2. css布局:定宽,自适应

    css三栏布局:1.中自:float,absolute,margin三种方法.2.中固:margin,table两种方法. 两边定宽,中间自适应: float: #left{ float:left; ...

  3. jq获取图片的原始尺寸,自适应布局

    原理: each()遍历,width().height()获取宽高, load() 注意: 由于页面加载完了,但图片不一定加载完了,所以直接通过 $("img").width(), ...

  4. UIImageView圆角,自适应图片宽高比例,图片拉伸,缩放比例和图片缩微图

    /*      设置圆角,通过layer中的cornerRadius和masksToBounds即可.            自适应图片宽高比例.通过UIViewContentModeScaleAsp ...

  5. 【CSS】318- CSS实现宽高等比自适应容器

    点击上方"前端自习课"关注,学习起来~ 在最近开发移动端页面,遇到这么一个情况:当页面宽度 100% 时,高度为宽度一半,并随手机宽度变化依然是一半. 于是我们就需要实现一个宽度自 ...

  6. 漂亮的自适应宽度的多色彩CSS图片按钮

    一.素材               二.效果 三.CSS *{padding:0;margin:0} /*----------------------------------- 自适应宽度图片按钮 ...

  7. 从零开始学习前端开发 — 7、CSS宽高自适应

    一.宽度自适应 语法:width:100%; 注: a)块状元素的默认宽度为100% b) 当给元素设置宽度为100%时,继承父元素的宽度 c) 通常使用宽度自适应实现通栏效果 二.高度自适应 语法: ...

  8. 纯Css实现Div高度根据自适应宽度(百分比)调整

    在如今响应式布局的要求下,很多能自动调整尺寸的元素能够做到高宽自适应,如img,通过{width:50%;height:auto;}实现图片高度跟随宽度比例调整. 然而,用的最多的标签一哥Div却不能 ...

  9. 使用CSS让元素尺寸缩小时保持宽高比例一致

    CSS中有一个属性padding对元素宽度存在依存关系.如果一个元素的 padding属性以百分比形式表示,padding 的大小是以该元素自身宽度为参照的. 若想要元素尺寸变化时,宽高比例不变,可以 ...

随机推荐

  1. GoLand使用

    # 不定期更新 什么是GoLand GoLand是JetBrains出品的一个Go语言IDE,JB的IDE有多好用我想很多程序员都知道,个人感觉唯一的缺点就是比较大(因为功能多) 希望大家多多支持正版 ...

  2. 7)django-示例(cbv)

    CBV(class base view)一个url根据method方式调用相应的方法.method常用有get,post 如果是GET请求,Home类会调用get方法,如果是POST提交数据,则类会调 ...

  3. Android性能优化之图片压缩优化

    1 分类Android图片压缩结合多种压缩方式,常用的有尺寸压缩.质量压缩.采样率压缩以及通过JNI调用libjpeg库来进行压缩. 参考此方法:Android-BitherCompress 备注:对 ...

  4. Confluence 6 安全概述和建议概述

    这个文档是针对 Confluence 的系统管理员希望对 Confluence Web应用程序安全性进行评估而设计的.这个页面将对系统的安全进行大致的描述,同时也会对 Confluence 的安全配置 ...

  5. Confluence 6 附件存储选项

    在早期的 Confluence 版本中,我们允许存储附件到 WebDav 或者 Confluence 数据库中.针对新的 Confluence 安装,我们不再支持这 2 种存储了. 本地文件系统 在默 ...

  6. (一)STL体系结构基础介绍

    一.STL六大部件 容器(Containers):存放元素,内存由分配器搞定 分配器(Allocator):支持容器的内存分配 算法:操作容器元素的函数.与OO不同(面向对象将元素与函数放到一个类里) ...

  7. mouseover、mouseout与mouseenter、mouseleave

    待定 附加链接: http://www.aijquery.cn/Html/jqueryrumen/129.html

  8. <<人月神话>>阅读体会(一)

    第一次听说人月神话还是在大一上学期的导论课那会儿,那会儿好像就已经确定了自己要学软件,于是就去问王建民老师能不能给我推荐几本软件工程方面的书,我想要提前自己学学,以为老师会给我推荐一些某种语言类的学习 ...

  9. bat如何实现图片与名字匹配重命名

    背景:有一批图片按顺序截取,需要按照规定的名称进行重名命. 问题:用批处理怎么实现呢?(公司电脑手动重名时,卡的不要不要的) No1:解决:将规定的名称放入criterion.txt中,将批处理Ren ...

  10. 树形dp 入门

    今天学了树形dp,发现树形dp就是入门难一些,于是好心的我便立志要发一篇树形dp入门的博客了. 树形dp的概念什么的,相信大家都已经明白,这里就不再多说.直接上例题. 一.常规树形DP P1352 没 ...