1、padding-bottom 如果用%来表示的话，计算是根据父元素的width的值进行计算的。

　　例：父元素.wrapper的width是100px，height设置为0, padding-bottom的值是50%，则该元素的高是50px

2、 百分比方法适用于的场景：一个图片需要全部显示出来，而且图片本身的宽高比例不变，能够随着屏幕的大小进行变化。

3、实现等比缩放的效果，还可以通过vw来设置，缺点：有的浏览器不支持。

　　下面是例子中css.wrapper中可以替换为

   .wrapper{

      width: 100%;

       height: 26.66vw;

    }

下面例子可以通过屏幕的缩放来等比的改变图片的宽高。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>padding-bottom</title>

   <style type="text/css" rel="stylesheet">

     .wrapper{

       width: 100%;

       height: 0;

       /*padding-bottom的值是基于父元素的width来计算的,则padding-bottom=100%/3.75=26.66% */

       padding-bottom: 26.66%;

       overflow: hidden;

     }

     .content{

         position: relative;

         width: 100%;

     }

   </style>

 </head>

 <body>

 <div class="wrapper">

   <!-- 子元素的图片的宽为375px,高为100px,则算出来的宽高比为375/100=3.75 -->

   <img class="content" src="http://img1.qunarzz.com/piao/fusion/1806/1c/4847ea66072c7b02.jpg_750x200_c32457fb.jpg" alt="图片">

 </div>

 </body>

 </html>

小技巧之padding-bottom实现等比例图片缩放的更多相关文章

  1. 小技巧，如何在Label中显示图片

    这个需求其实是有的,比如QQ聊天界面里面发送的信息,可以用label来显示文字(也可以用button显示),但是有时候用户可能会发送图片.如果能让Label遇到文字就显示文字,遇到图片就显示图片就好了 ...

  2. iOS 开发中使用到的小技巧汇总

    国庆即将来到,一个小项目也即将完成,把自己在项目中用的一些小技巧写出来,方便查找. 1,去掉分割线--动画设置透明度alpha //去掉tableView的分隔线:     self.tableVie ...

  3. CSS 小技巧

    CSS 小技巧 一.边框内圆角 我们在设计例如按钮等控件的时候,会遇到这样的设计:只有内侧有圆角,而边框或者描边的四个角还是保持直角的形状,用以下代码可以轻松的实现. #wrapper { width ...

  4. Android小技巧

    一.android:clipChildren属性 效果图 看到这个图时你可以先想想如果是你,你怎么实现这个效果.马上想到用RelativeLayout?NO,NO,NO,,, 实现代码 <?xm ...

  5. cssfloat布局以及其他小技巧

    css float 布局以及其他小技巧总结 这篇博文 前面四个部分是关于css 经典布局 如果你已经知道了 可以直接跳过看第六部分 css 的其他小技巧 1.0 左右居中布局 <!DOCTYPE ...

  6. 前端网络、JavaScript优化以及开发小技巧

    一.网络优化 YSlow有23条规则,中文可以参考这里.这几十条规则最主要是在做消除或减少不必要的网络延迟,将需要传输的数据压缩至最少. 1)合并压缩CSS.JavaScript.图片,静态资源CDN ...

  7. iOS：小技巧（不断更新）

    记录下一些不常用技巧,以防忘记,复制用. 1.获取当前的View在Window的frame: UIWindow * window=[[[UIApplication sharedApplication] ...

  8. 你想的到想不到的 javascript 应用小技巧方法

    javascript 在前端应用体验小技巧继续积累. 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElemen ...

  9. css的小技巧

    前几天看到<css揭秘>这本书,第一感觉是 css怎么能出这么厚的一本书,不过 细细一想,用好css真的可以实现很多想要的效果,节省很多js代码. 总结几个css的小技巧: 1,将所有元素 ...

随机推荐

  1. (转)Bash Shell常用快捷键

    Bash Shell常用快捷键 原文:https://github.com/hokein/Wiki/wiki/Bash-Shell%E5%B8%B8%E7%94%A8%E5%BF%AB%E6%8D%B ...

  2. 程序代码里出现illegal character '\ufeff' 和 expected class or object definition的解决办法（图文详解）

    不多说,直接上干货! 问题详情 问题分析    可能原因导致1:你的程序也许,是在他人那里复制而来,会导致这样的问题. 可能原因导致2:由于页面编码造成的.  可能原因导致1的解决办法 这个,好比,我 ...

  3. 【密码学】DES、3DES

    文章1: 这一篇文章要解决数据加密——数据补位的问题.DES算法的两种模式ECB和CBC问题以及更加安全的算法——3DES算法. 一.数据补位 DES数据加解密就是将数据按照8个字节一段进行DES加密 ...

  4. C#常用控件的属性以及方法（转载）

    -----以前看别人的,保存了下来,但是忘了源处,望见谅. C#常用控件属性及方法介绍 目录 1.窗体(Form) 2.Label (标签)控件 3.TextBox(文本框)控件 4.RichText ...

  5. SpringBoot | 第二十四章：日志管理之AOP统一日志

    前言 上一章节,介绍了目前开发中常见的log4j2及logback日志框架的整合知识.在很多时候,我们在开发一个系统时,不管出于何种考虑,比如是审计要求,或者防抵赖,还是保留操作痕迹的角度,一般都会有 ...

  6. Vmware 可用的激活码

    4F207-8HJ1M-WZCP8-000N0-92Q6G 0A6Z5-8H1EJ-WZCL1-PK072-23DJG 0F0Q9-8F38L-RZXT9-4U054-ACW5F JA02E-09H4 ...

  7. c# 业务层事务

    步骤: 1.先添加System.Transactions.dll的引用 2.使用System.Transactions命名空间下的类 实例: using (TransactionScope scope ...

  8. usb-host一步一步学（一）安卓在usb-host模式下列出当前连接的usb设备

    在本次尝试中,我的安卓手机(HTC One X) 通过OTG线作为usb主机模式列出当前插入的usb设备,版本要求minSDKVersion="12". 没有外设的情况下,结果如下 ...

  9. BZOJ3693: 圆桌会议(Hall定理 线段树)

    题意 题目链接 Sol 好的又是神仙题... 我的思路:对于区间分两种情况讨论,一种是完全包含,另一种是部分包含.第一种情况非常好判断,至于计算对于一个区间[l, r]的$\sum a[i]$就可以了 ...

  10. h5 本地存储

    H5本地存储有两个API,一个是Web Storage,还有一个是Web SQL.不管是哪一个,都是基于JavaScript语言来使用,接下来我就教你怎么使用H5本地存储,本文篇幅较大,JS代码较多, ...