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

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

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

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. LeetCode第一题—— Two Sum(寻找两数,要求和为target)

    题目描述: Given an array of integers, return indices of the two numbers such that they add up to a speci ...

  2. 筛法求欧拉函数(poj2478

    求1-n的欧拉函数的值 #include <iostream> #include <cstdio> #include <queue> #include <al ...

  3. 拓扑排序+并查集——cf1131D

    以前做过了忘记掉了..拓扑排序如果要处理等于关系,就要用并查集把相等关系进行缩点 /* 1.相等关系用并查集合并 2.不等关系用有向边链接 3.拓扑排序求顺序 */ #include<bits/ ...

  4. 一个Js开发者学习Python的第一天

    原文地址:小寒的博客 https://www.dodoblog.cn/blogs/5bf6b8fa0c09883d0f8aad13 作为一个有着足足两年半学习经验和一年半开发经验的js开发者,看着js ...

  5. 最后的egret

    坚持做一件事真的好难~ 决定重新写博客的时候想着一定要坚持一个周一篇,然而.... 年后上班老板找我的第一件大事:以后公司的棋牌产品不会有大的动作了:公司PHP(内部用的运营后台)的小姐姐休产假了,我 ...

  6. python3-常用模块之openpyxl(1)

    1.创建工作簿 from openpyxl import Workbook # 创建excel对象 wb = Workbook() # 获取第一个sheet = wb.active # 单元格写入内容 ...

  7. 2019-8-31-dotnet-启动-JIT-多核心编译提升启动性能

    title author date CreateTime categories dotnet 启动 JIT 多核心编译提升启动性能 lindexi 2019-08-31 16:55:58 +0800 ...

  8. [vagrant]vagrant centos静态ip设置

    vagrant 中使用的是public_network,而工作网络中,由于桥接了很多路由器,导致ip段位和本机的ip段位不在同一个局域网中 ifconfig之后的结果 [root@localhost ...

  9. C#(.net)中的DllImport

    大家在实际工作学习C#的时候,可能会问:为什么我们要为一些已经存在的功能(比如Windows中的一些功能,C++中已经编写好的一些方法)要重新编写代码,C#有没有方法可以直接都用这些原本已经存在的功能 ...

  10. HZOI2019建造游乐园(play)组合数学,欧拉图

    题目:https://www.cnblogs.com/Juve/articles/11186805.html(密码是我的一个oj用户名) solution: 反正我是想不出来... 题目大意就是要求出 ...