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

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

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

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. Nginx 和 Gunicorn 部署 Django项目

    目录 Nginx 和 Gunicorn 部署 Django项目 配置Nginx 安装配置Gunicorn 通过命令行直接启动 Gunicorn 与 uwsgi 的区别,用哪个好呢 Gunicorn u ...

  2. Ubuntu usb设备端口号绑定

    1.将串口设备插入USB口,通过lsusb查看端口信息.例如: ID 1a86:7523 表示usb设备的ID(这个ID由芯片制造商设置,可以唯一表示该设备) 1a86 usb_device_desc ...

  3. hp笔记本在设置VT-x为启用模式后还是无法在VMware上开启CentOS虚拟机

    在h笔记本上,将VT-x设置为Enabled模式后,需要断开电源,拆下电池,然后再按住开机按钮10秒钟左右放开,再重新装上电池,接通电源即可.

  4. MyEclipse使用总结——将原有的MyEclipse中的项目转成maven项目[转]

    前面一篇文章中我们了解了 在myeclipse中新建Maven框架的web项目 那么如果我们原来有一些项目现在想转成maven项目应该怎么做呢 我收集到了三种思路: 一.新建一个maven项目,把原项 ...

  5. Matlab系列作业

    (2019年2月19日注:Matlab这门课是在我大四上学期经历的,那时候开这篇文章是为了记录学习Matlab的时候遇到的坑,所以将所有的作业题合并到一篇文章中) 1.创建一个10*10的矩阵,矩阵所 ...

  6. day 36 MySQL的库、表的详细操作

    MySQL的库.表的详细操作   MySQL数据库 本节目录 一 库操作 二 表操作 三 行操作 一 库操作 1.创建数据库 1.1 语法 CREATE DATABASE 数据库名 charset u ...

  7. 图片转成base64 跨域等安全限制及解决方案

    把其他域的图片在canvas中转换为base64时,会遇到跨域安全限制. 目前,唯一可行的方案是,把图片文件以arraybuffer的形式ajax下载下来,然后直接转base4. 但是,这样有个毛病, ...

  8. PAT甲级——【牛客练习A1004】

    题目描述 An inorder binary tree traversal can be implemented in a non-recursive way with a stack. For ex ...

  9. 使用Java代码获取Java进程ID的方法

    需要jre/lib下的tools.jar包 public class Test { public static void main(String[] args) throws Exception {  ...

  10. jquery旋转插件rotate参数说明

    具体可见:http://www.jianshu.com/p/b632a1ed6a57