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

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

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

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. leetcode146周赛-5130-等价多米诺骨牌对的数量

    题目描述: 方法一: class Solution(object): def numEquivDominoPairs(self, dominoes): """ :type ...

  2. apache配置域名子目录,访问不同子项目

    <VirtualHost *:443> DocumentRoot "E:/phpstudy/WWW/nextplus" ServerName local-main.co ...

  3. ERROR in xxx.js from UglifyJs

    在打包项目的时候,出现如下的错误: 经过搜索找到原因: 这是因为webpack在打包vue文件时没有成功转换ES6的语法. 解决方案 解决方法很简单,加入babel-preset-es2015插件即可 ...

  4. Maven的作用及简介

    Maven的作用及简介 一.maven作用 项目之间都是有依赖的,比如A项目依赖于B项目,B项目依赖与C.D项目,等等.这样的依赖链可能很长. 但是,没有一个项目的jar包我们都要导入进去,我们要做的 ...

  5. 转:linux中select()函数分析

    源地址:http://blog.csdn.net/zi_jin/article/details/4214359 Select在Socket编程中还是比较重要的,可是对于初学Socket的人来说都不太爱 ...

  6. ie浏览器下载附件中文乱码

    String llq = request.getHeader( "USER-AGENT" ).toLowerCase();Boolean isIE = false;if (llq. ...

  7. java基础之Integer包装类

    Integer类概述: Integer 类在对象中包装了一个基本类型 int 的值 该类提供了多个方法,能在 int 类型和 String 类型之间互相转换,还提供了处理 int 类型时非常有用的其他 ...

  8. 将UBB编码转成标准的HTML代码

    /// <summary> /// 将UBB编码转成标准的HTML代码 /// </summary> /// <param name="argString&qu ...

  9. js 引入Vue.js实现vue效果

    拆分组件为单个js见:https://www.jianshu.com/p/2f0335818ceb 效果 html <!DOCTYPE html> <html> <hea ...

  10. elasticsearch 中文API 记数(八)

    计数API 计数API允许开发者简单的执行一个查询,返回和查询条件相匹配的文档的总数.它可以跨多个索引以及跨多个类型执行. import static org.elasticsearch.index. ...