如何在编辑器中显示图像保持率答案

【问题标题】：How to display image keep ratio in editor如何在编辑器中显示图像保持率
【发布时间】：2021-07-01 01:08:06
【问题描述】：

我有一个 div 容器来显示从编辑器输入的内容。

在编辑器中，我上传了一张图片，我想在那个 div 容器中显示这张图片并保持图片比例？

我可以吗？我可以得到我上传到编辑器的图像大小吗？

【问题讨论】：

标签： html css editor image-size

【解决方案1】：

如果您将width: 100%; 赋予图像，高度将自动调整，因为height: auto; 样式。

如果您需要高级设置，请阅读以下内容：

如果你有带有源的img标签，你可以得到img.naturalWidth和img.naturalHeight，所以你可以制作一个包含这个图像的div并给它成比例的大小。

<div class='wrapper'>
  <img class='img' src='./photo.png' />
</div>

.wrapper {
  width: 100%;
  height: 0;
  padding: 0 0 57%;
  position: absolute;
}

.img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

您可以将此“填充：0 0 57%”部分更改为您想要的任何内容。例如，您可以使用 javascript 进行设置：

wrapper.style.padding = '0 0 ' + img.naturalWidth / img.naturalHeight * 100 + '%;';

在这种情况下，如果.wrapper 宽度发生变化，高度也会自动变化。

【讨论】：