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

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

这个问题说起来也是老生常谈，歪马今天再次提起也是希望有朝一日当你被问到的时候，能够答得漂亮。

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

听到这个的时候你一定不要盲目的说出答案。因为这么问的话，题目并不明确。所以你可以帮面试官补充题设或提问来确认要求。你可以做如下回答：

• 如果元素的尺寸已知的话，没什么好说的，计算好宽高写上去就行了。
• 如果元素尺寸未知，最简单的方法是用JavaScript实现，如果用CSS的话可以分为以下几种：
  • 如果是可替换元素<img>或<video>，该怎么实现?
  • 如果是普通的元素，又应该怎么实现？

今天歪马就和大家一起看看上面几种情况。

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

我们重点讨论元素尺寸未知的情况。

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

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

可替换元素(如<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