你肯定已经知道，对于一个 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 ↩
<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style type="text/css">

			.item {

				float: left;

				width: 21%;

				margin: 10px 2%;

				height: 0;

				padding-bottom: 33.98%;

				background-color: #dbe0e4;

			}

		</style>

	</head>

	<body>

		<div class="item"></div>

		<div class="item"></div>

		<div class="item"></div>

		<div class="item"></div>

		<div class="item"></div>

		<div class="item"></div>

		<div class="item"></div>

		<div class="item"></div>

		<div class="item"></div>

		<div class="item"></div>

	</body>

</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. HDU 2084 DP经典例子---数塔问题

    http://acm.hdu.edu.cn/showproblem.php?pid=2084 #include "iostream" #include "cstdio&q ...

  2. 利用saltstack初始化OpenStack服务器环境

    目录架构图如上图所示 sls脚本详情如下: Sync_Host: file.managed: - name: /etc/hosts - source: salt://state/files/hosts ...

  3. 【bzoj3926- [Zjoi2015]诸神眷顾的幻想乡】广义sam

    题意:给定一棵树,每个节点有一个颜色,问树上有多少种子串(定义子串为某两个点上的路径),保证叶子节点数<=20.n<=10^5 题解: 叶子节点小于等于20,考虑将每个叶子节点作为根把树给 ...

  4. 通过 CLI 搭建 ghost

    参考: ghost 官网 系统架构说明 架构 架构说明 本实践将 web 接入, nodejs 服务, 数据库分离, 适合生产环境场景. nginx 接入请求, 反向代理后端 nodejs 服务 no ...

  5. DotNETCore 学习笔记 异常处理

    Error Handling public void Configure(IApplicationBuilder app, IHostingEnvironment env) { app.UseIISP ...

  6. [bzoj2251][2010Beijing Wc]外星联络——后缀数组+暴力求解

    Brief Description 找到 01 串中所有重复出现次数大于 1 的子串.并按字典序输出他们的出现次数. Algorithm Design 求出后缀数组之后,枚举每一个后缀,对于每个后缀从 ...

  7. 大型网站调试工具之一（php性能优化分析工具XDebug）

    一.安装配置 1.下载PHP的XDebug扩展,网址:http://xdebug.org/ 2.在Linux下编译安装XDebug 引用 tar -xzf xdebug-2.0.0RC3.gzcd x ...

  8. module加载过程初步分析［更新中］【转】

    转自:http://blog.chinaunix.net/uid-1817735-id-2837068.html 分析这个过程可以有助于我们认识在加载模块时出现的问题大抵在哪里了. 直接从sys_in ...

  9. OSI和TCP/IP的对比+IP地址分类

    一.OSI和TCP/IP对比 二.IP地址分类 A类私有IP地址:10.0.0.0-10.255.255.255B类私有IP地址:172.16.0.0-172.31.255.255C类私有IP地址:1 ...

  10. 3.资源调度框架yarn

    既然要分析yarn,无非是从以下方面分析 (一).yarn产生背景(二).yarn概述(三).yarn架构(四).yarn执行流程(五).yarn环境搭建(六).提交作业到yarn上运行 (一).ya ...