要保持图片的比例不变

这一张图片在不同分辨率（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. POJ Georgia and Bob-----阶梯博弈变形。

    Georgia and Bob Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 6622   Accepted: 1932 D ...

  2. 您可能不知道的CSS元素隐藏“失效”以其妙用——张鑫旭

    一.CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间:有的可以响应点击,有的不能响应点击.后宫选秀——一个一个看. { display: non ...

  3. java.lang.IllegalStateException: Mapped class was not specified

    错误如下:java.lang.IllegalStateException: Mapped class was not specifiedat org.springframework.util.Asse ...

  4. 阿里云短信服务Java版

    短信服务管理平台 https://dysms.console.aliyun.com/dysms.htm java短信发送API    https://help.aliyun.com/document_ ...

  5. js面向对象设计之class继承

    EcmaScript 2015 (又称ES6)通过一些新的关键字,使类成为了JS中一个新的一等公民.但是目前为止,这些关于类的新关键字仅仅是建立在旧的原型系统上的语法糖,所以它们并没有带来任何的新特性 ...

  6. 报表在IBM AIX系统下resin部署

     报表是用java开发的,具有良好的跨平台性.不仅可以应用在windows.linux.操作系统,还可以应用在AIX等等的unix操作系统.在各种操作系统上部署过程有一些差别.下面说一下在AIX操 ...

  7. 2018-10-13 21:30:51 conversion of number systems

    2018-10-13 21:30:51  c language 二进制.八进制和十六进制: 1) 整数部分 十进制整数转换为 N 进制整数采用“除 N 取余,逆序排列”法. 十进制数字 36926 转 ...

  8. apache ftp server的简单入门(properties验证)

    Apache FTPServer:(开源) Apache FTPServer是一个100%纯Java的FTP服务器. 它的设计是基于现有的开放式协议的完整和便携式FTP服务器引擎解决方案.FTPSer ...

  9. 动态修改JDBC数据源配置

    因项目需要能动态修改数据源的配置,及修改后不用重启整个应用.使用的数据源是apache的BasicDataSource,网上千篇一律的是如下实现: BasicDataSource bds=getDat ...

  10. react实例：理解dva构建项目的原理

    请点击相应的步骤查看详情 我们首先搭建一个 dva Demo  项目(请参考react快速构建一个应用项目),然后逐步完成以下内容: 结构划分 设计 Model 组件设计方法 组件设计实践 添加 Re ...