要保持图片的比例不变

这一张图片在不同分辨率（1980px, 1364px,移动端400px）下均保持了一定的比例不变。

方法：

padding以及margin的上下（margin-top | margin-bottom | padding-top | padding-bottom）使用百分比时。参考的是容器的宽度。注意不是容器的高度。

容器使用width:100% ，这样容器的高度由padding-top撑开，高度为宽度的35%。这样图片的比例始终是 100:35 不会变形。

图片保持比例，padding的妙用的更多相关文章

  1. 理解CSS3中的background－size(对响应性图片等比例缩放)

    理解CSS3中的background-size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性 给图片设置固定的宽度和高度的 固定宽度400px和高度200px-使用ba ...

  2. 让ie6也支持max-width，和max-height实现图片等比例缩放

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. (转载)让ie6也支持max-width，和max-height实现图片等比例缩放

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 【转载】如何让图片按比例响应式缩放、并自动裁剪的css技巧

    原文: http://blog.csdn.net/oulihong123/article/details/54601030 响应式网站.移动端页面在DIV CSS布局中对于图片列表或图片排版时, 如果 ...

  5. C#图片按比例缩放

    C#图片按比例缩放: // 按比例缩放图片 public Image ZoomPicture(Image SourceImage, int TargetWidth, int TargetHeight) ...

  6. js控制 固定框架内图片 按比例显示 以及 占满框架 居中显示

    js控制 固定框架内图片 等比例显示 以及 占满框架 纵横居中显示 通过设置 js函数 fitDiv里面var fit的值就好 function fitDiv (obj) { var target_w ...

  7. 【转】微信小程序开发之图片等比例缩放 获取屏幕尺寸图片尺寸 自适应

    原文[https://blog.csdn.net/qq_31383345/article/details/53127804] 早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于 ...

  8. css3 实现图片等比例放大与缩小

    css3 实现图片等比例放大与缩小 在工作中,经常会碰到图片缩放的情况,比如服务器端返回的图片大小,可能大小不同,有的大,有的小,服务器端返回的图片大小我们不能控制的,但是在我们设计稿的时候,可能会规 ...

  9. css 如何实现图片等比例缩放

    在进行布局的时候,很多PM都要求图片等比例缩放,而且要求图片不失真,不变形,但是UI设计好了这个div的宽度又不能随意更改,而后台传过来的图片也不是等比例的图片,这就比较难受了,写成 width: 1 ...

随机推荐

  1. IDEA 现有项目连接SVN

    前言:有时会先搭建好系统,准备好所有配置文件及公共类,然后才会从IDEA中将代码放到SVN中,这里正好讲述了如何从现有代码连接到SVN. 首先将该项目启动SVN管理 然后关联对应SVN地址 右键项目名 ...

  2. 利用css3制作毛玻璃的效果

    忙里偷闲,最近又在看许多比较酷炫的效果.现在基于jquery的插件比较多,但是很多插件的兼容性不是太好,所以原生的才是王道.在日常当中,毛玻璃已经不常见了,那是一个很久远年代的东西了.诺,下面就是毛玻 ...

  3. Less与Sass框架

    一.Less语法 1.变量声明: @变量名:变量值; @newHeight:20px; 2.调用变量: .box { width: @newHeight; height: @newHeight; } ...

  4. 使用iview-admin2构建的项目，热更新无法启动

    原因:@vue/cli-service版本是3.0.1解决:升级@vue/cli-service到最新版本

  5. Ubuntu pydot failed to call GraphViz.Please install GraphViz 解决方法

    如果遇到: OSError: `pydot` failed to call GraphViz.Please install GraphViz (https://www.graphviz.org/) a ...

  6. 少个人保护？我来！——阿里云在ICANN第3届GDD峰会纪实

    西班牙马德里以足球和斗牛闻名于世,2017年5月9日至11日,ICANN第三届全球域名部门行业峰会(GDD)在这里召开.阿里云作为亚洲域名保有量最高的注册商,代表成千上万客户的利益与权力,派出代表,前 ...

  7. Android 时间轴的实现

    时间轴 时间轴,顾名思义就是将发生的事件按照时间顺序罗列起来,给用户带来一种更加直观的体验.京东和淘宝的物流顺序就是一个时间轴(如图),想必大家都不陌生. 时间轴的初探 初次见到这种UI,感觉整个布局 ...

  8. linux 文件搜索命令find、-name、-iname、通配符*？、-size、-user、-group、-amin、-cmin、-mmin、-a、-o、-exec/-ok、-inum

    尽可能规划好目录结构,少用文件搜索操作,因为它会占用大量的系统资源 find /bin/find find [搜索范围] [匹配条件] find /etc -name initfind /etc -n ...

  9. windows Ctrl + Alt + 方向键 取消屏幕反转

    1.在桌面右击 2.再次右击桌面 3.单击选项和支持 4.点击禁用和应用

  10. MYSQL数据类型 表基本操作 表记录增删改 单表查询

    一.数据类型 常用的数据类型如下: 整数:int,bit 小数:decimal 字符串:varchar,char 日期时间: date, time, datetime 枚举类型(enum) 特别说明的 ...