面试官：CSS如何实现固定宽高比？

对于这个问题，你可能尚未过相关需求，或者尚未在面试的时候被问到过，可是歪马相信你终将有须要。

这个问题提及来也是老生常谈，歪马今天再次提起也是但愿有朝一日当你被问到的时候，可以答得漂亮。

若是有一天你被问到：“你能说一下如何实现一个固定宽高比的元素吗？”

听到这个的时候你必定不要盲目的说出答案。由于这么问的话，题目并不明确。因此你能够帮面试官补充题设或提问来确认要求。你能够作以下回答：

• 若是元素的尺寸已知的话，没什么好说的，计算好宽高写上去就好了。
• 若是元素尺寸未知，最简单的方法是用 JavaScript 实现，若是用 CSS 的话能够分为如下几种：

  • 若是是可替换元素 <img>或 <video>，该怎么实现?
  • 若是是普通的元素，又应该怎么实现？

今天歪马就和你们一块儿看看上面几种状况。

首先，元素尺寸已知，这个 pass 掉。不用说，说了我怕大家打我。

咱们重点讨论元素尺寸未知的状况。

因此本文主要分为可替换元素和普通元素如何实现固定宽高比。

1、可替换元素实现固定宽高比

可替换元素(如<img>、<video>)和其余元素不一样，它们自己有像素宽度和高度的概念。因此若是想实现这一类元素固定宽高比，就比较简单。

咱们能够指定其宽度或者高度值，另外一边自动计算就能够了。

以下，咱们固定图片元素的宽度，高度自适应：

<div class="img-wrapper">
  <img src="https://p3.ssl.qhimg.com/t01f7d210920c0c73bd.jpg" alt="">
</div>
复制代码

.img-wrapper {
  width: 50vw;
  margin: 100px auto;
  padding: 10px;
  border: 5px solid lightsalmon;
  font-size: 0;
}
复制代码img { width: 100%; height: auto; } 复制代码

效果以下图所示，能够看出当可视区域不断变大的过程当中，图片会跟着变大，而且保留了原比例。

图片元素固定宽高比

你可能没注意到，咱们给img元素设定了height: auto;，这是为了不开发者或者内容管理系统在 HTML 源码中给图片添加了height属性，经过这个方式能够覆盖掉，避免出现 bug。

此外，对于video元素也相似，你们能够试下，效果以下。

video元素固定宽高比

2、普通元素实现固定宽高比

虽然咱们上面实现了可替换元素的固定宽高比，可是这个比例主要是由于可替换元素自己有尺寸，并且这个比例还会受到原有尺寸比例的限制。显然，这并不灵活，那咱们该如何针对普通元素实现固定宽高比呢。

首先咱们来看看最经典的padding-bottom/padding-top的 hack 方式。

2.1 padding-bottom实现普通元素固定宽高比

在以前的陪读章节《精通 CSS》第 3 章 可见格式化模型中，咱们提到垂直方向上的内外边距使用百分比作单位时，是基于包含块的宽度来计算的。

下面均以padding-bottom为例

经过借助padding-bottom咱们就能够实现一个宽高比例固定的元素，以div为例。

HTML:

<div class="wrapper">
  <div class="intrinsic-aspect-ratio-container"></div>
</div>
复制代码

CSS:

.wrapper {
  width: 40vw;
}
.intrinsic-aspect-ratio-container {
  width: 100%;
  height: 0;
  padding: 0;
  padding-bottom: 75%;
  margin: 50px;
  background-color: lightsalmon;
}
复制代码

效果以下：

固定宽高比的div

如上代码，咱们将div元素的高度设为了0，经过padding-bottom来撑开盒子的高度，实现了4/3的固定宽高比。

这样是实现了固定宽高比，但其只是一个徒有其表的空盒子，里面没有内容。若是想在里面放入内容，咱们还须要将div`内部的内容使用绝对定位来充满固定尺寸的容器元素。

以下：

.intrinsic-aspect-ratio {
  position: relative;
  width: 100%;
  height: 0;
  padding: 0;
  padding-bottom: 75%;
  margin: 50px;
  background-color: lightsalmon;
}
.content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
复制代码

经过这种方式咱们就能够实现一个能够填充内容的固定尺寸的容器了。

此外，尺寸比例，咱们也能够经过calc()来计算，这样比较灵活。咱们能够快速的写出任意比例，如padding-bottom: calc(33 / 17 * 100%);。

不知道，你有没有发现，上面的这种方式只能高度随着宽度动，并不能实现宽度随着高度动。

那有没有办法实现宽度随着高度动呢？答案是没有，至少如今没有。但未来就会有了。接下来咱们一块儿看看更简单便捷的另外一种方式。

2.2 aspect-ratio属性指定元素宽高比

因为固定宽高比的需求存在已久，经过padding-bottom来 hack 的方式也很不直观，而且须要元素的嵌套。

W3C 的 CSS 工做组为了不这一问题，已经在致力于实现这样一个属性aspect-ratio。该方案已经提出，可是尚未浏览器实现，如今还处于设计节点，暂时尚未已发布的工做组草案，只有编辑草案。

可是这并不妨碍咱们来提早了解一下这个新技术。

下面让咱们一块儿来看看是如何的便利吧。

aspect-ratio的语法格式以下：aspect-ratio: <widtu-ratio>/<height-ratio>。

以下，咱们能够将width或height设为auto，而后指定aspect-ratio。另外一个值就会按照比例自动变化。

/* 高度随动 */
.box1 {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
}
复制代码/* 宽度随动 */ .box2 { height: 100%; width: auto; aspect-ratio: 16/9; } 复制代码

这一技术能够很灵活的实现元素的固定宽高比，而且指定宽高之一都可。只是如今尚未浏览器实现，让咱们共同期待吧。

3、总结

本文总结了如何实现元素的固定宽高比。若是你再在面试的过程当中被问到这个问题。你就能够像这样回答了。

• 若是元素的尺寸已知的话，没什么好说的，计算好宽高写上去就好了。
• 若是元素尺寸未知，最简单的方法是用 JavaScript 实现，若是用 CSS 的话又要分为如下几种：

  • 若是是可替换元素 <img>或 <video>，能够将 width/ height其一设定尺寸，另外一个设为 auto，则可替换元素会根据其固有尺寸进行变化。
  • 若是是普通的元素，咱们能够经过 padding-top/ padding-bottom的方式来模拟固定宽高比，不过这种方式不灵活，只可以高度随着宽度变。CSS 工做组如今正在引入一种新的方案 aspect-ratio，能够很方便地指定宽高比，不过暂时尚未浏览器实现。相信不久以后就会有浏览器逐渐实现了。

若是最后你的答案是这样的，那么你不只完善了老师的题设，给出了各类状况的解决方案，最后还点出了标准中正在制定的新方案。这样回答不只展现了你对于问题考虑的严谨，还能够看出你时刻关注着标准的制定，这都是大大的加分项哟。这样，我只能说，此次面试你稳了。

参考连接

• Aspect Ratio Boxes
• Designing An Aspect Ratio Unit For CSS
• CSS Box Sizing Module Level 4

---

若是你喜欢，欢迎扫码关注个人公众号，若是可以转发分享那就更好了。我会按期陪读，并分享一些其余的前端知识，期待与你共同进步。