要保持图片的比例不变

这一张图片在不同分辨率（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. JSP学习笔记（1）-JSP简介

    1.什么是JSP? JSP是Java server page的缩写,有sun公司倡导,许多公司参与,于1999年推出的一种web服务设计标准.JSP基于Java Servlet以及整个java体系的W ...

  2. 在MyBatis中查询数据、涉及多参数的数据访问操作、插入数据时获取数据自增长的id、关联表查询操作、动态SQL、关于配置MyBatis映射没有代码提示的解决方案

    1. 单元测试 在单元测试中,每个测试方法都需要执行相同的前置代码和后置代码,则可以自定义2个方法,分别在这2个方法中执行前置代码和后置代码,并为这2个方法添加@Before和@After注解,然后, ...

  3. Flink1.4.0中反序列化及序列化类变化

    Flink1.4.0中,反序列化及序列化时继承的类,有一些被标记为了“@deprecated”,路径上也有变化: 1.AbstractDeserializationSchema 以前路径 org.ap ...

  4. ida不错的插件记录

    IDASkins 地址 https://github.com/zyantific/IDASkins 作用 ida黑色皮肤插件 IDAFuzzy 地址 https://github.com/Ga-ryo ...

  5. 一种特殊场景下的HASH JOIN的优化为NEST LOOP.

    应用场景: 有如下的SQL: select t.*, t1.ownerfrom t, t1where t.id=t1.id; 表t ,t1的数据量比较大,比如200W行.但是两张表能关联的行数却很少, ...

  6. Python DDT(data driven tests)模块心得

    关于ddt模块的一些心得,主要是看官网的例子,加上一点自己的理解,官网地址:http://ddt.readthedocs.io/en/latest/example.html ddt(data driv ...

  7. Mysql 事务日志(Ib_logfile)

    mysql的innodb中事务日志ib_logfile(0/1) 概念:事务日志或称redo日志,在mysql中默认以ib_logfile0,ib_logfile1名称存在,可以手工修改参数,调节开启 ...

  8. laravel session的几个特点

    1. 只要访问了网站,就会创建一个临时的session 2.用户登录后sessionid就会发生变化 3.在这期间,即使使用4g网络,ip地址会不断发生变化,只要cookie中包含了sessionid ...

  9. Django之模型注册

    接着上一篇:Django之创建项目 目的:一个空项目创建好了,我们在models.py中新增3张表并在admin界面中显示,并能操作它们. 示例models 编辑models.py # -*- cod ...

  10. Windows 7系统启动MongoDB失败解决办法？

    问题现象: 1.在配置Python环境安装MongoDB时发现在“服务”里面手动启动失败,报错如下: 2.在cmd里面也无法启动,注意这里要以管理员身份启动cmd哦 问题解决: 1.需要先在bin下执 ...