给图像添加填充

以下是如何使用CSS和宽高比来居中和填充图片的方法：

首先，需要将图片包装在一个容器元素中，例如<div>或<figure>。这将使您可以对容器应用样式，从而影响内部的图像。
将容器的position属性设置为relative。这将允许您在容器内定位图片。
向容器添加一个::after伪元素。这将用于保持图像的宽高比并创建填充。
将::after伪元素的content属性设置为空字符串。这是创建元素所必需的。
将::after伪元素的padding-bottom属性设置为与图像的宽高比相对应的百分比值。例如，如果您的图像的宽高比为4:3，则应将填充设置为75%（因为3/4 = 0.75）。这将在图像下方创建填充。
将::after伪元素的position属性设置为absolute。这将在容器内定位元素。
将::after伪元素的top、left、bottom和right属性设置为0。这将使元素填满容器，创建填充。
最后，将图片本身的position属性设置为absolute。这将使您可以使用top、left、bottom和right属性将图片居中于容器内。

以下是用CSS代码来居中和填充一个宽高比为4:3的图像的示例：

.container {
  position: relative;
  width: 100%;
}

.container::after {
  content: "";
  display: block;
  padding-bottom: 75%; /* 4:3 宽高比 */
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

在这个示例中，.container元素是图像的容器。::after伪元素用于创建填充并保持图像的宽高比。img元素设置为position: absolute，因此可以使用top、left、bottom和right属性将其居中于容器内。

通过将图像的max-width和max-height属性设置为100%，图像将按比例缩放以适应可用空间，同时保持其宽高比。这意味着由::after伪元素创建的填充将始终与图像的大小成比例。