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 的大小是以该元素自身宽度为参照的. 若想要元素尺寸变化时,宽高比例不变,可以 ...
随机推荐
- awk-for循环简单用法
文本: [root@VM_0_84_centos ~]# cat sshd.txt 1 2 3 4 5 6 7 8 9 循环打印上述文本 for 循环的固定格式 i=1设置i的初始变量 i< ...
- VUE (vue-cli)脚手架项目说明
1. 概述 1.1 说明 使用vue-cli快速创建的vue项目目录如下: build -- webpack相关配置以及服务启动文件,配置多依赖于下边的config文件夹中内容 config -- ...
- JdbcUtil
package com.todaytech.pwp.core.exception; public class BizException extends RuntimeException { publi ...
- TypeError: $(…).tooltip is not a function
问题描述:改了一个页面,发现进入这个页面的时候就一直在load···,F12看了一下,发现报了这个错误TypeError: $(…).tooltip is not a function,然后我就百度了 ...
- 【python】ftp连接,主被动,调试等级
示例代码如下: #!/usr/bin/env python # -*- coding: utf-8 -*- import os from ftplib import FTP def ftp_down( ...
- 第四周学习总结-HTML
2018年8月5日 这是暑假第四周,这一周我在菜鸟教程网学到了许多HTML的知识.HTML编写网页不像C语言.Java语言那必须有主方法.主函数什么的,它基本上都是标签(元素),但是它可以与CSS(层 ...
- sass基础—属性嵌套以及跳出嵌套 @at-root
/*注意:定义的变量若是没有使用则不会编译到css文件中.*//*1)sass的局部变量*/$font:14px;//定义$font:12px !default; //没有default时是重新赋值, ...
- python 内置数据类型之数字
目录: 1.2. 数字 1.2.1. 数字类型 1.2.2. 浮点数 1.2.3. 进制记数 1.2.4. 设置小数精度 1.2.5. 分数 1.2.6. 除法 1.2 数字 1.2.1 数字类型 ...
- jenkins原理
原理:Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能. 直白的说:这个jenkins是CI ...
- 获取访问IP
public static String GetIP() { String ip = HttpContext.Current.Request.ServerVariables["HTTP_X_ ...