如何在各种布局中保持图片宽高比？

可以使用CSS中的object-fit属性来保持图片的宽高比适配各种布局。object-fit属性可以控制元素中内容的尺寸和位置，并根据元素的宽高比自动缩放内容。

设置object-fit: contain;可以保留图片的原始宽高比，并缩放图片以适应元素。如果元素的宽高比与图片的宽高比不同，图片会出现留白。

设置object-fit: cover;可以保留图片的原始宽高比，并缩放图片以填充整个元素。如果元素的宽高比与图片的宽高比不同，图片会被裁剪以适应元素。

例如，以下代码会将一个图片居中显示在一个固定大小的元素中，并保持原始宽高比：

<div class="container">
  <img src="image.jpg" alt="image" class="image">
</div>

.container {
  width: 500px;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

在上面的代码中，max-width: 100%;和max-height: 100%;确保图片不会超出容器的界限；object-fit: contain;可以保持原始宽高比并适应元素中的图片。