图片保持比例,padding的妙用
要保持图片的比例不变
这一张图片在不同分辨率(1980px, 1364px,移动端400px)下均保持了一定的比例不变。
方法:
padding以及margin的上下(margin-top | margin-bottom | padding-top | padding-bottom)使用百分比时。参考的是容器的宽度。注意不是容器的高度。
容器使用width:100% ,这样容器的高度由padding-top撑开,高度为宽度的35%。这样图片的比例始终是 100:35 不会变形。
图片保持比例,padding的妙用的更多相关文章
- 理解CSS3中的background-size(对响应性图片等比例缩放)
理解CSS3中的background-size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性 给图片设置固定的宽度和高度的 固定宽度400px和高度200px-使用ba ...
- 让ie6也支持max-width,和max-height实现图片等比例缩放
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- (转载)让ie6也支持max-width,和max-height实现图片等比例缩放
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【转载】如何让图片按比例响应式缩放、并自动裁剪的css技巧
原文: http://blog.csdn.net/oulihong123/article/details/54601030 响应式网站.移动端页面在DIV CSS布局中对于图片列表或图片排版时, 如果 ...
- C#图片按比例缩放
C#图片按比例缩放: // 按比例缩放图片 public Image ZoomPicture(Image SourceImage, int TargetWidth, int TargetHeight) ...
- js控制 固定框架内图片 按比例显示 以及 占满框架 居中显示
js控制 固定框架内图片 等比例显示 以及 占满框架 纵横居中显示 通过设置 js函数 fitDiv里面var fit的值就好 function fitDiv (obj) { var target_w ...
- 【转】微信小程序开发之图片等比例缩放 获取屏幕尺寸图片尺寸 自适应
原文[https://blog.csdn.net/qq_31383345/article/details/53127804] 早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于 ...
- css3 实现图片等比例放大与缩小
css3 实现图片等比例放大与缩小 在工作中,经常会碰到图片缩放的情况,比如服务器端返回的图片大小,可能大小不同,有的大,有的小,服务器端返回的图片大小我们不能控制的,但是在我们设计稿的时候,可能会规 ...
- css 如何实现图片等比例缩放
在进行布局的时候,很多PM都要求图片等比例缩放,而且要求图片不失真,不变形,但是UI设计好了这个div的宽度又不能随意更改,而后台传过来的图片也不是等比例的图片,这就比较难受了,写成 width: 1 ...
随机推荐
- centos7下更新firefox
下载最新版firefox 1.点击三条线-问号-firefox帮助-安装和更新-linux安装-系统和语言下载 保存到指定目录,比如home下 2.解压 tar xjf firefox-*.tar.b ...
- 【学习笔记】--- 老男孩学Python,day10, 函数, 动态参数 命名空间\作用域 global nonlocal
1. 动态参数 位置参数的动态参数: *args 关键字参数的动态参数 : **kwargs 顺序:位置---*args---默认值---**kwargs 在形参上*聚合, **聚合 在实参上*打散, ...
- bzoj1061 NOI2018 志愿者招募——solution
Description 申奥成功后,布布经过不懈努力,终于成为奥组委下属公司人力资源部门的主管.布布刚上任就遇到了一个难 题:为即将启动的奥运新项目招募一批短期志愿者.经过估算,这个项目需要N 天才能 ...
- FileReader读取文件
前言:FileReader是一种异步文件读取机制,结合input:file可以很方便的读取本地文件. input:file 在介绍FileReader之前,先简单介绍input的file类型. < ...
- css文字属性
font-family- css字体:设定时,需考虑浏览器中有无该字体. 比如说“黑体” “微软雅黑” font-size -css字体大小: 注意度量html单位.例如:font-size:18p ...
- Java设计模式—建造者模式
建造模式: 将一个复杂的对象的构建与它的表示分离,使得同样的构建 过程可以创建不同的. 建造模式表示是将复杂的内部创建封装在内部,对于外部调用的人来说,只需要传入建造者和建造工具,对于内 ...
- CentOS7系列--1.5CentOS7配置vim
CentOS7配置vim 1. 安装vim [root@centos7 ~]# yum -y install vim-enhanced Loaded plugins: fastestmirror ba ...
- Office - Excel 2013
1. 在使用TODAY()时需要注意格式,比如,如果系统区域是中国,那么格式为2015/7/28,如果在单元格中设置了其它格式(比如美国格式 3/24/2015),则可能无法比较: 2. $表示cel ...
- Play-with-chrome之环境搭建
前言 浏览器漏洞在 APT 攻击中用的比较多,而且这基本上是用户上网的标配了,所以研究浏览器的漏洞是十分有前景的,我认为.我选择 chrome 浏览器 ( chromium和 chrome之间的关系请 ...
- JSON学习笔记-1
1.什么是JSON? JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式.它基于 ECMAScript (欧洲计算机协会制定的js规范)的一 ...