你肯定已经知道，对于一个 img 元素而言，你可以单独地修改它的 width 或者 height 属性来设置它的大小，同时图片的比例还能够保持不变。

如下图所示，最上面是原始大小的图片，下面两张则分别是设置了 width: 50% 和 height: 50% 属性后的样子。

可以看到把宽度设置为了原来的一半的同时，图片的高度并不是保持原来的大小，而是相应的也变成了原来的一半，使得图片仍能够保持原有的比例。同理把高度设成原来的一半也如此。

作为对照，我们看看单独修改其他元素的宽和高会产生什么样的效果：

上图最左边的蓝色矩形是原始的 div 元素，之后两个分别是对其设置了 width: 50% 和 height: 50% 属性后的样子。可见与 img 元素不同，单独设置 div 元素的宽度（高度）时，对应的高度（宽度）并不会改变，从而导致元素的比例发生变化。这一结果相信每个稍微对前端有些了解的同学都能猜到。但是究竟是什么导致了同样的属性用于 img 和 div 后会产生不同的结果呢？

img 在元素分类中属于 replaced （被替换的）元素。replaced 元素表示这个元素内容的显示不是由 CSS 控制的。换句话说，对于 img 元素而言，图片的内容并不是由 CSS 定义的，而是通过其 src 属性指向的资源决定的。很多 replaced 元素来都会有自己的固有尺寸（Intrinsic dimension），img 也不例外1。当 img 的高度改变后，浏览器会计算出其缩放比例，而当元素的宽度是 auto（即默认值）时，浏览器则以原始宽度 * 缩放比例来作为元素的新宽度。从而使得 img 元素的比例始终保持一致。

然而这都并不是这篇文章讨论的重点。（那位同学请不要说脏话，不文明

重点是什么？重点就是题目：实现等比例缩放的盒子。

在响应式设计逐渐成为主流的今天，流式布局这个词即使放在一两年前也绝算不得是个新鲜词汇。下面是一个布局实例：

上图中每个蓝色的矩形分别对应一个 div 元素，每个元素的宽度占窗口宽度的四分之一（图示中为了演示方便给每个元素加了边距效果）。如果不做额外处理，当窗口宽度变小时上图的页面会变为如下所示：

可见每个元素的宽度进行了缩放，但高度并没有变化，看起来并不是很协调。所以有些场景下我们需要实现当窗口宽度缩放时，使得元素宽度自适应的同时，保证每个元素的宽高比例不变。

很多同学在我话还没讲完时，就已经纷纷掏出 JavaScript 大锤着手实现了起来。然而这个系列文章的标题是《你不知道的 CSS》，自然不会介绍 CSS 实现不了这种打自己脸的需求，而且就此例而言，使用 JavaScript 实现效果并不好，绑定 onresize 事件后在拖拽时某些星座的朋友会察觉出来些许卡顿（你试试便知），而且在 JavaScript 加载完成前是看不出效果的。

其实用 CSS 可以很容易地实现这样的效果，用的属性也是我们每个工作日和周末（如果加班的话）都会用到的：padding-bottom。padding-bottom 有一个让人很容易忽略的特性是当它的值是百分比形式时，百分比的基数是其所在元素的父元素的宽度而不是高度（同 padding-left 和 padding-right 一样）。这样解决方案也就非常明显了：

  1. 将元素的 height 设成 0，使得元素的高度等于 padding-bottom；
  2. 合理设置 padding-bottom 的值。比如每个元素的 width 是 25%，现在想让元素的高度始终保持为其宽度的两倍，则 padding-bottom 的值应该设置为 50%。

结果如下图所示：

相应的代码可以参见：http://jsfiddle.net/luin/25BbH/7/。

然而至此，这篇文章还没完。肯定会有很多同学疑惑既然 height 被设成了 0，那么如果元素的 overflow 为 hidden，里面的文字会不会因为超出了元素高度而被隐藏呢？

答案是不会。根据 CSS 2.1 规范2，overflow 只会对处于 padding edge 外面的内容生效，即只有超出了 padding 区域的内容才会被 overflow 属性隐藏掉。

  1. 其实有一点例外的情况是当 img 的图片是 svg 时，它是没有固有尺寸的。 ↩
  2. http://www.w3.org/TR/CSS2/visufx.html ↩
  1. <!DOCTYPE html>
  2. <html>
  4. 	<head>
  5. 		<meta charset="UTF-8">
  6. 		<title></title>
  7. 		<style type="text/css">
  8. 			.item {
  9. 				float: left;
  10. 				width: 21%;
  11. 				margin: 10px 2%;
  12. 				height: 0;
  13. 				padding-bottom: 33.98%;
  14. 				background-color: #dbe0e4;
  15. 			}
  16. 		</style>
  17. 	</head>
  19. 	<body>
  20. 		<div class="item"></div>
  21. 		<div class="item"></div>
  22. 		<div class="item"></div>
  23. 		<div class="item"></div>
  24. 		<div class="item"></div>
  25. 		<div class="item"></div>
  26. 		<div class="item"></div>
  27. 		<div class="item"></div>
  28. 		<div class="item"></div>
  29. 		<div class="item"></div>
  30. 	</body>
  32. </html>

《你不知道的 CSS》之等比例缩放的盒子的更多相关文章

  1. css背景图等比例缩放，盒子随背景图等比例缩放

    很多时候我们给网站了一个大banner,但是随着屏幕的变化,背景会变形,我们知道background-size可以实现背景图等比例缩放,但是,我们想让下面的盒子根据缩放后背景图的高度,也能自动向上挤. ...

  2. CSS实现图片快速等比例缩放，效果佳

    初学者在实现图片等比例缩放,通常会使用js编写逻辑来控制高或宽,达到自动缩放的效果. 这里提供一种纯CSS的图片缩放功能,请看代码: <style type="text/css&quo ...

  3. css中如何做到容器按比例缩放

    需求: 一般在响应式中,我们会要求视频的宽高比为16:9或4:3,这么一来就比较头大了.当用户改变浏览器宽度的时候(改变高度不考虑),视频的宽度变了,那么高度也得根据我们要求的16:9或4:3改变. ...

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

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

  5. 解决 图片在div中等比例缩放问题 （未解决：图片比例小于盒子模型时不会自动填充）

    如题,该方案仅支持对图片等比例缩放.本文附件地址:https://files.cnblogs.com/files/john69-/background-Img.rar <!DOCTYPE htm ...

  6. css如何实现图片响应式等比例缩放，裁剪

    <div class="bg_picWrapper"  :style="{backgroundImage:'url('+img+')'}">---- ...

  7. css 布局之定位 相对/绝对/成比例缩放

    给body添加 overflow: hidden; 可以将页面所有的 滚动条隐藏,但必须要给body 设置一个高度 overflow: hidden; height:864px; 父元素必须要设置 p ...

  8. CSS让DIV按照背景图片的比例缩放，并让背景图片填充整个元素（转）

    目的是:通过background的一系列属性,让DIV按照背景图片的比例缩放,并让背景图片填充整个DIV 首先我们需要让背景图片在指定的DIV中全部填充显示 之前看有用类似 background-at ...

  9. css技术之用最高和最宽的限制“max-height和max-width”做图片同比例缩放，达到图片不变形目的，做出批量打印图片功能,页面打印“window.print()”

    一.简介 他们是为流而生的,像width/height这种定死的砖头式布局,min-width/max-width就没有存在的意义 ,min-width/max-width一定是自适应布局或流体布局中 ...

随机推荐

  1. [POJ1144][BZOJ2730]tarjan求割点

    求割点 一种显然的n^2做法: 枚举每个点,去掉该点连出的边,然后判断整个图是否联通 用tarjan求割点: 分情况讨论 如果是root的话,其为割点当且仅当下方有两棵及以上的子树 其他情况 设当前节 ...

  2. 微信小程序登录流程图

    一. 官方登录时序图 官方的登录时序图 二. 简单理解 这里仅按照官方推荐的规范来 0. 前置条件 一共有三端: - 微信小程序客户端 - 第三方服务器端- 微信服务器端 1. 客户端获得code,并 ...

  3. Linux虚拟地址空间布局以及进程栈和线程栈总结【转】

    转自:http://www.cnblogs.com/xzzzh/p/6596982.html 原文链接:http://blog.csdn.net/freeelinux/article/details/ ...

  4. Google的C++开源代码项目

    Google的C++开源代码项目 http://www.open-open.com/lib/view/open1413873531356.html v8  -  V8 JavaScript Engin ...

  5. Selenium 多窗口元素定位处理

    以下文章来自于  上海-悠悠的博客 <Selenium2+python自动化13-多窗口.句柄(handle)> 有些页面的链接打开后,会重新打开一个窗口,对于这种情况,想在新页面上操作, ...

  6. DRF的认证与权限功能

    认证 1.全局配置 在setting.py进行配置. REST_FRAMEWORK = { 'DEFAULT_AUTHENTICATION_CLASSES': ( # 'rest_framework. ...

  7. python中的闭包与装饰器

    #原创,转载请留言联系 装饰器的本质就是闭包,所以想知道装饰器是什么,首先要理解一下什么是闭包. 闭包 1. 外部函数返回内部函数的引用.2. 内部函数使用外部函数的变量或者参数. def outer ...

  8. [DB2]Linux下安装db2 v9.7

    https://www.cnblogs.com/cancer-sun/p/5168728.html

  9. 16.RDD实战

    第16课:RDD实战 由于RDD的不可修改的特性,导致RDD的操作与正常面向对象的操作不同,RDD的操作基本分为3大类:transformation,action,contoller 1.   Tra ...

  10. Spring：面向切片编程

    在之前我们记录Spring的随笔当中,都是记录的Spring如何对对象进行注入,如何对对象的属性值进行注入,即我们讲解的很大部分都是Spring的其中一个核心概念——依赖注入(或者说是控制翻转,IOC ...