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 ...
随机推荐
- [转]NuGet学习笔记(1) 初识NuGet及快速安装使用
关于NuGet园子里已经有不少介绍及使用经验,本文仅作为自己研究学习NuGet一个记录. 初次认识NuGet是在去年把项目升级为MVC3的时候,当时看到工具菜单多一项Library Package M ...
- [不知道出自什么OJ]最大利润
题目描述 政府邀请了你在火车站开饭店,但不允许同时在两个相连接的火车站开.任意两个火车站有且只有一条路径,每个火车站最多有50个和它相连接的火车站. 告诉你每个火车站的利润,问你可以获得的最大利润为多 ...
- JDK源码阅读--AbstractStringBuilder
abstract class AbstractStringBuilder implements Appendable, CharSequence /** * The value is used for ...
- exiftool(-k)与gui的联合使用
首先下载一个exiftool下载后改名字https://sno.phy.queensu.ca/~phil/exiftool/ 根据自己的操作系统选择,我需要这个 然后下载guihttp://u88.n ...
- Apache Pig入门学习文档(一)
1,Pig的安装 (一)软件要求 (二)下载Pig (三)编译Pig 2,运行Pig (一)Pig的所有执行模式 (二)pig的交互式模式 (三)使用pig脚本 ...
- Gilde jar包冲突(环信的导入)
Error:Execution failedfortask':app:transformClassesWithJarMergingForDebug'.>com.android.build.api ...
- mysql工具使用
mysql -u user_name -p123456 -h host_name -P 3306 -D database_name -e "show full processlist;&qu ...
- Gartner首推机密计算:阿里云名列其中
近日,全球信息技术研究机构Gartner发布了2019年云安全技术成熟度曲线报告(Gartner, Hype Cycle for Cloud Security, 2019, Jay Heiser, S ...
- csp-s模拟43,44 A,C,F
题面:https://www.cnblogs.com/Juve/articles/11534880.html A: T可以写成如下形式:$T=b^k*S+m*a$, 其中$m=\sum\limits_ ...
- HZOI20190803 A,C题
题目链接:https://www.cnblogs.com/Juve/articles/11295333.html A: 考场上只有70分... 发现几个性质:特殊性质1:在两条链上,看它是fib第几项 ...