css 宽高比例自适应,css图片根据div宽高比例自适应

1.div布局

证件有效信息面

placeholder="请上传证件照">

文件格式为：jpg或png；文件大小：1M至5M

效果图

根据图片原始尺寸等比缩放，不拉伸图片宽高；

前端使用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标签

$("").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

$("#"+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 宽高比例自适应,css图片根据div宽高比例自适应相关推荐

CSS：实现background-image背景图片全屏铺满自适应
body {/* 加载背景图 */background-image: url(images/bg.jpg);/* 背景图垂直.水平均居中 */background-position: center c ...
使用纯CSS实现未知尺寸的图片(但高宽都小于500px)在500px的正方形容器中水平和垂直居中。你有几种方法？
解决这个问题有多种方法 1.使用css hack 处理ie6下的问题. 2.嵌入其它标签使其垂直居中. 方法一: .box { /*非IE的主流浏览器识别的垂直居中的方法*/ ...
html div自动高度,CSS技巧：3种常用方法解决div列高度自适应
本文向大家介绍一下解决div列高度自适的3种常用方法,分别是利用"clear:both"背景填充,使用脚本控制高度和margin负值父子容器高度继承三种. CSS技巧:解决div列 ...
div 自定义拉宽_纯Css实现Div高度根据自适应宽度（百分比）调整
在如今响应式布局的要求下,很多能自动调整尺寸的元素能够做到高宽自适应,如img,通过{width:50%;height:auto;}实现图片高度跟随宽度比例调整. 然而,用的最多的标签一哥Div却不能 ...
css实现九宫格，不定宽高百分比（使用padding实现Div高度根据自适应宽度（百分比）调整）
css实现九宫格,但不一定有9个,可能有8个.7个,每两个格子间距是10px,一行放置3个格子,格子宽高比为1:2(最右的面试题) <div class="box">& ...
图片广告自适应代码html,使用自适应模板网站添加广告自适应的方法（DIV+CSS控制）...
现在随着HTM5+CSS3越来越流行,自适应站点也越来越多,但是自适应站点会遇到一个问题,添加的广告不会自适应,添加了PC端的广告后,使用手机浏览,会发现广告严重变形或者显示不全或者根本不显示,今天就 ...
css 大图保持宽高比压缩,CSS实现自适应下保持宽高比
在项目中,我们可能经常使得自己设计的网页能自适应.特别是网站中的图片,经常要求在网页放大(或缩小)时,宽高同时放大(或缩小),而且不变形(即保持正常的长宽比).为了不变形,常用的方法就是设置width ...
CSS实现自适应的图片背景边框代码
代码简介: CSS漂亮的图片边框,边框是用背景图片修饰的,不过可以自适应大小,这点挺实用的,不论你的图片有多大,它始终显示在图片的外围,不会错位,这当然还要归功于CSS的功劳. 代码内容: View ...
html div左中右布局,求助css。一个div包含两个div，左右布局，左边css宽30%，右边div宽70%。高度均自...
求助css. 一个div包含两个div,左右布局,左边css宽30%,右边div宽70%.高度均自以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让 ...

css 宽高比例自适应,css图片根据div宽高比例自适应

css 宽高比例自适应,css图片根据div宽高比例自适应相关推荐

最新文章

热门文章