要去上班了,时间比较紧,先把代码粘出来,原理慢慢讲

我来了,今天是农历七月八日,昨天是七夕,不知道为什么,突然通知放假半天(嘎嘎),好吧,没什么!!!走到半路的我看到通知,立马撤了。正好回来把这个原理补上。

一般情况下,网页嵌入人物图片,是必须要按比例缩放的,不像一般的图片操作起来比较简单。

1、设置盒子的宽。

2、给盒子加:before(主要是为了把盒子撑开),设高为图片高(相对父盒子设置百分比)。

3、设置图片为绝对定位(top:0;)。

4、必须设置图片宽高100%。

css 始终让图片占满自适应盒子(图片不失真)的更多相关文章

  1. 16、css实现div中图片占满整个屏幕

    <div class="img"></div> .img{ background: url("../assets/image/img.png&qu ...

  2. python让你再也不为文章配图与素材发愁,让高清图片占满你的硬盘! #华为云·寻找黑马程序员#

    欢迎添加华为云小助手微信(微信号:HWCloud002 或 HWCloud003),输入关键字"加群",加入华为云线上技术讨论群:输入关键字"最新活动",获取华 ...

  3. 妈蛋:kinMaxShow轮播图异常,WebUploader图片上传坑爹,图片被压缩了

    今天晚上在改造轮播图. 原来的代码是这样的: <div> <img src="${static}/image/index/banner/`.jpg" /> ...

  4. js控制 固定框架内图片 按比例显示 以及 占满框架 居中显示

    js控制 固定框架内图片 等比例显示 以及 占满框架 纵横居中显示 通过设置 js函数 fitDiv里面var fit的值就好 function fitDiv (obj) { var target_w ...

  5. React里单页面div自适应浏览器高度占满屏幕

    可以用绝对定位方式,让div占满屏幕,css样式如下: height: 100%; width: 100%; position: absolute; top: 0px; bottom: 0px;

  6. css background-size与背景图片填满div

    background-size与背景图片填满div 在开发中,常有需要将一张图片作为一个div的背景图片充满div的需求 background-size的取值及解释 background-size共有 ...

  7. 移动端H5适配方法(盒子+图片+文字)

    一.怎么让H5页面适应手机 a.利用meta标签 <meta name="viewport" content="width=device-width,initial ...

  8. CSS块级-内联元素,盒子模型

    CSS元素 元素分类和区别 常用的块状元素有: <div>.<p>.<h1>~<h6>.<ol>.<ul>.<li> ...

  9. video视频标签一些设置,包括封面、播放结束后的封面、视频占满屏幕的方式、视频播放暂停、展示控制栏、触发全屏播放事件

    video视频标签一些设置,包括封面.播放结束后的封面.视频占满屏幕的方式.视频链接.视频播放暂停.展示控制栏.触发全屏播放事件 <video id="video" auto ...

随机推荐

  1. odoo中的QWeb模板引擎

    * 概述    QWeb是odoo主要模板引擎,采用xml表述,最后生成HTML文件    * 一般用法 #条件表达式 <t t-if="record.effort_estimate. ...

  2. 跳表上线性dp——1150D 好题!

    题目设计的很好,感觉做了这题对dp的状态有了更深的理解 /* 先预处理序列自动机 dp[i][j][k]表示匹配到i,j,k时的最靠前的位置 那么现在A串加入了一个字母,我们要求的就是dp[i+1][ ...

  3. BZOJ 1579 [Usaco2009 Feb]Revamping Trails 道路升级

    堆优化的dijkstra. 把一个点拆成k个. 日常空间要开炸一次.. //Twenty #include<cstdio> #include<cstring> #include ...

  4. Zuul上传文件

    对于1M以内的文件上传,无需任何处理,大文件10M以上需要为上传路径添加/zuul前缀,也可使用zuul.servlet-path自定义前缀 如果Zuul使用了Ribbon做负载均衡,那么对于超大的文 ...

  5. Python使用微信接入图灵机器人

    1.wxpy库介绍 wxpy 在 itchat 的基础上,通过大量接口优化提升了模块的易用性,并进行丰富的功能扩展. 文档地址:https://wxpy.readthedocs.io 从 PYPI 官 ...

  6. PKU--1267 Cash Machine(多重背包)

    题目http://poj.org/problem?id=1276 分析 这是一个多重背包的问题,可以把请求的金额当作背包的重量,而货币的面值就是价值又是重量. 于是这个问题便很好理解背包了. #];; ...

  7. C#控件的闪烁问题解决方法总结

    最近对代码作了一些优化,试验后效果还可以,但是发现界面会闪烁,具体是TreeView控件会闪烁,语言为C#,IDE为VS2005.在查阅一些资料,使用了一些基本技术后(如开启双缓冲),发现没什么效果. ...

  8. yii2下使用支付宝

    最近入坑了yii2 感觉是个很强大的框架.使用yii做支付宝的移动支付的时候出了点问题,记录下来避免以后忘记了. 使用的是支付宝立即到账的功能,网上很多集成好的接口我就不重复了,找不到的话github ...

  9. springMVC和springBoot区别

    Spring MVC是什么?(1)Spring MVC是Spring提供的一个强大而灵活的模块式web框架.通过Dispatcher Servlet, ModelAndView 和 View Reso ...

  10. DBUtils(DataSourceUtils提供数据源)

    DBUtils是apache组织的一个工具类,jdbc的框架,更方便我们使用 使用步骤: 1.导入jar包(commons-dbutils-1.4.jar,c3p0-0.9.1.2.jar) 1.1导 ...