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

编程问答 2022-05-15

问题描述

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

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

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

enter image description here

解决方法

如果您给图像设置 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 宽度改变，高度也会自动改变。

editoreditorhtmlimage-size