面试官提问之CSS如何实现固定宽高比

针对“面试官提问之CSS如何实现固定宽高比”的问题，我给出以下完整攻略：

针对“面试官提问之CSS如何实现固定宽高比”的问题，我给出以下完整攻略：

1. 理解固定宽高比的概念

首先，固定宽高比指的是某个元素的宽度和高度之间存在一个固定的比例关系，即宽高比例不会随着容器尺寸的改变而改变。在实现固定宽高比的过程中，我们通常会用到“padding占位符”和伪元素等技术。

2. 使用padding-bottom实现固定宽高比

padding-bottom技术是使用padding属性来创建一个占位符，这个占位符在高度上等于宽度的一个固定比例。具体来说，我们可以设置元素的父容器为相对定位，在子元素中使用absolute定位，同时为子元素设置一个padding-bottom比例。具体代码示例如下：

<div class="wrapper">
  <div class="content"></div>
</div>

/*父容器*/
.wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 75%; /*4:3宽高比例*/
}
/*子元素*/
.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

以上代码实现了一个4:3的宽高比例。其中，父容器的padding-bottom值为75%是因为4:3宽高比例对应的是宽度为100%、高度为75%的矩形。此外，子元素需要设置为绝对定位，以免在布局过程中出现异常。

3. 使用伪元素实现固定宽高比

除了上述padding-bottom方式，还可以使用伪元素实现固定宽高比。这是因为伪元素本身就是独立的元素，我们可以通过它来承载和展示我们需要实现宽高比的内容。具体方法是：

• 设置父容器的position为relative；
• 在父容器中创建一个伪元素，通过设置padding-bottom来实现宽高比例；
• 给伪元素设置绝对定位，并将需要实现宽高比例的内容放在伪元素中。

具体代码示例如下：

<div class="wrapper">
    <div class="image"></div>
</div>

.wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 75%; /*4:3宽高比例*/
}
.wrapper::before {
  content: "";
  display: block;
  padding-bottom: inherit; /*继承父元素的padding-bottom值*/
}
.image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('xxx.jpg');
  background-size: cover;
}

以上代码实现了一个4:3的宽高比例。其中，父容器的padding-bottom值为75%是因为4:3宽高比例对应的是宽度为100%、高度为75%的矩形。伪元素通过继承父元素的padding-bottom值来实现宽高比例，并承载需要展示的内容。

以上就是使用CSS实现固定宽高比的完整攻略和两个实现示例。