css 始终让图片占满自适应盒子(图片不失真)
要去上班了,时间比较紧,先把代码粘出来,原理慢慢讲
我来了,今天是农历七月八日,昨天是七夕,不知道为什么,突然通知放假半天(嘎嘎),好吧,没什么!!!走到半路的我看到通知,立马撤了。正好回来把这个原理补上。
一般情况下,网页嵌入人物图片,是必须要按比例缩放的,不像一般的图片操作起来比较简单。
1、设置盒子的宽。
2、给盒子加:before(主要是为了把盒子撑开),设高为图片高(相对父盒子设置百分比)。
3、设置图片为绝对定位(top:0;)。
4、必须设置图片宽高100%。


css 始终让图片占满自适应盒子(图片不失真)的更多相关文章
- 16、css实现div中图片占满整个屏幕
<div class="img"></div> .img{ background: url("../assets/image/img.png&qu ...
- python让你再也不为文章配图与素材发愁,让高清图片占满你的硬盘! #华为云·寻找黑马程序员#
欢迎添加华为云小助手微信(微信号:HWCloud002 或 HWCloud003),输入关键字"加群",加入华为云线上技术讨论群:输入关键字"最新活动",获取华 ...
- 妈蛋:kinMaxShow轮播图异常,WebUploader图片上传坑爹,图片被压缩了
今天晚上在改造轮播图. 原来的代码是这样的: <div> <img src="${static}/image/index/banner/`.jpg" /> ...
- js控制 固定框架内图片 按比例显示 以及 占满框架 居中显示
js控制 固定框架内图片 等比例显示 以及 占满框架 纵横居中显示 通过设置 js函数 fitDiv里面var fit的值就好 function fitDiv (obj) { var target_w ...
- React里单页面div自适应浏览器高度占满屏幕
可以用绝对定位方式,让div占满屏幕,css样式如下: height: 100%; width: 100%; position: absolute; top: 0px; bottom: 0px;
- css background-size与背景图片填满div
background-size与背景图片填满div 在开发中,常有需要将一张图片作为一个div的背景图片充满div的需求 background-size的取值及解释 background-size共有 ...
- 移动端H5适配方法(盒子+图片+文字)
一.怎么让H5页面适应手机 a.利用meta标签 <meta name="viewport" content="width=device-width,initial ...
- CSS块级-内联元素,盒子模型
CSS元素 元素分类和区别 常用的块状元素有: <div>.<p>.<h1>~<h6>.<ol>.<ul>.<li> ...
- video视频标签一些设置,包括封面、播放结束后的封面、视频占满屏幕的方式、视频播放暂停、展示控制栏、触发全屏播放事件
video视频标签一些设置,包括封面.播放结束后的封面.视频占满屏幕的方式.视频链接.视频播放暂停.展示控制栏.触发全屏播放事件 <video id="video" auto ...
随机推荐
- webpack新手名词解释……妈妈再也不担心我看不懂webpack官方文档了
__dirname : 在任何模块文件内部,可以使用__dirname变量获取当前模块文件所在目录的完整绝对路径. path.resolve(): 方法将一系列路径或路径段解析为绝对路径. 语法: p ...
- hdu 1754 I Hate It (线段树)
原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=1754 线段树的模板题,详细的都写在代码里了 //不知道为什么定义单个字符,用%c输入会超时,换成字符数 ...
- DBUtils(DataSourceUtils提供数据源)
DBUtils是apache组织的一个工具类,jdbc的框架,更方便我们使用 使用步骤: 1.导入jar包(commons-dbutils-1.4.jar,c3p0-0.9.1.2.jar) 1.1导 ...
- hdu1527
hdu1527两堆博弈模型,威佐夫博弈 #include<iostream> #include<cstdio> #include<queue> #include&l ...
- List--使用List作为堆栈和队列
1,List作为堆栈 堆栈“先进后出”.对此,可以使用append和pop来操作数据. 不指定下标时,pop会先操作最后一个数据. 例如: 2,队列 队列“先进先出”.当然也可以使用append和po ...
- HZOI20190902模拟35题解
题面: A:公园 DAG上想拓扑dp 然而博主记忆化搜索了一下 设f[i][j]表示从i节点走j个点出公园所用的最小时间 则$f[u][i]=min(f[v][j-1]+dis_{u,v})$; 然后 ...
- 【hihocoder 1477】闰秒
[题目链接]:http://hihocoder.com/problemset/problem/1477 [题意] 中文题 [题解] 首先,一年一年地加,把开始的年份和结束的年份之间的年根据是否为闰年; ...
- day72作业
目录 models模型类 路由配置 视图配置 序列化组件配置 基于ModelSerializer类,完成Car资源的单查,群查,单增接口 序列化:显示车名,车的颜色,车的价格,车的海报,车的品牌 反序 ...
- Django项目:CMDB(服务器硬件资产自动采集系统)--03--03CMDB信息安全API接口交互认证
#settings.py """ Django settings for AutoCmdb project. Generated by 'django-admin sta ...
- 19-10-23-L-Mor
ZJ一下: 挺好,T2打表差点出规律(最近拿PFGYL硬卡提升自己几乎没有的打表水平) T1竟然……是个××题 T3的Floyd写死了. T1 简单思考会发现……直接全异或起来就AC 话说T1真叫最大 ...