如果您正在使用object-fit: contain，那么图像的原始宽高比已经被保留，因为整个图像必须适应其父元素。所以，如果图像原始宽度为100px，高度为150px，并且您将图像设置为width: 100px和height: 200px，图像的高度仍然为150px，但是在figure元素的顶部和底部会添加额外的25px的空间。

要解决这个问题，您只需要将高度设置为“auto”。

img {
  // 为了可读性，将您的样式声明移到这里
  width: 100px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

现在，如果您实际上想要定义宽度和高度，并强制图像符合这些尺寸，您应该使用除object-fit: contain之外的其他方法。您可以在这里了解其他选项，但也许您想设置figure元素的宽度/高度并让图像填充该空间。在这种情况下，您可以这样做：

figure {
    display: block;
    width: 100px;
    max-width: 100%;
    height: 200px;
}
img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: blue;
}