如何在父图片的100%高度处填充图片并保存比例(宽度:图片高度)？

要在父图片的100%高度处填充图片并保持宽高比，你可以使用CSS的object-fit属性。这个属性可以控制图片在其容器中的填充方式。

以下是一个简单的HTML和CSS示例，展示了如何实现这一点：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Fill Example</title>
<style>
  .container {
    height: 500px; /* 父容器的高度 */
    width: 100%; /* 父容器的宽度 */
    overflow: hidden; /* 防止内容溢出 */
  }

  .image-container {
    height: 100%; /* 图片容器高度设置为父容器的100% */
    width: 100%; /* 图片容器宽度设置为父容器的100% */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  img {
    height: 100%; /* 图片高度设置为容器高度 */
    width: auto; /* 图片宽度自动调整以保持宽高比 */
    object-fit: cover; /* 图片填充方式 */
  }
</style>
</head>
<body>

<div class="container">
  <div class="image-container">
    <img src="your-image-url.jpg" alt="Your Image">
  </div>
</div>

</body>
</html>

在这个例子中，.container 是父容器，.image-container 是图片的容器，而 img 标签则是需要填充的图片。通过设置 .image-container 的高度为100%，并且给 img 设置 height: 100% 和 object-fit: cover，图片将会在保持宽高比的情况下填充整个容器的高度。

如果你想要将处理后的图片保存下来，可以使用JavaScript来捕获DOM中的图片，并将其转换为Blob对象，然后创建一个下载链接供用户下载。

function saveImage() {
  const img = document.querySelector('img');
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  canvas.width = img.naturalWidth;
  canvas.height = img.naturalHeight;
  ctx.drawImage(img, 0, 0);

  canvas.toBlob((blob) => {
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = 'image-filled.png';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }, 'image/png');
}

// 添加一个按钮来触发保存图片的操作
document.body.innerHTML += '<button onclick="saveImage()">Save Image</button>';

这段代码会在页面上添加一个按钮，当点击这个按钮时，会触发 saveImage 函数，该函数会将图片保存为PNG格式并提供下载。

请注意，这个解决方案是在浏览器端执行的，如果你需要在服务器端处理图片，你可能需要使用服务器端的图像处理库，如Node.js的sharp库或者其他语言的相应库。

参考链接：