小技巧之padding-bottom实现等比例图片缩放

Posted yuxingyoucan

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小技巧之padding-bottom实现等比例图片缩放相关的知识，希望对你有一定的参考价值。

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

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

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

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

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

 

   .wrapper{
      width: 100%;
       height: 26.66vw;
    }

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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>padding-bottom</title>
 6   <style type="text/css" rel="stylesheet">
 7     .wrapper{
 8       width: 100%;
 9       height: 0;
10       /*padding-bottom的值是基于父元素的width来计算的,则padding-bottom=100%/3.75=26.66% */
11       padding-bottom: 26.66%;
12       overflow: hidden;
13     }
14     .content{
15         position: relative;
16         width: 100%;
17     }
18   </style>
19 </head>
20 <body>
21 <div class="wrapper">
22   <!-- 子元素的图片的宽为375px,高为100px,则算出来的宽高比为375/100=3.75 -->
23   <img class="content" src="http://img1.qunarzz.com/piao/fusion/1806/1c/4847ea66072c7b02.jpg_750x200_c32457fb.jpg" alt="图片">
24 </div>
25 </body>
26 </html>

 

以上是关于小技巧之padding-bottom实现等比例图片缩放的主要内容，如果未能解决你的问题，请参考以下文章

小5聊纯javascript实现图片放大镜效果

PHP实现图片的等比缩放和Logo水印功能示例

微信小程序学习点滴《十二》：图片等比例缩放 获取屏幕尺寸图片尺寸 自适应

uniapp微信小程序图片裁剪插件，支持自定义尺寸定点等比例缩放拖动图片翻转剪切圆形/圆角图片定制样式

S实现控制图片显示大小的方法图片等比例缩放功能

php实现等比例不失真缩放上传图片的方法