如何在编辑器中显示图片保持比例

Question

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

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

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

Answer 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;
}

您可以将此 'padding: 0 0 57%' 部分更改为您想要的任何内容。例如，您可以设置为 javascript:

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

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

如何在编辑器中显示图片保持比例

How to display image keep ratio in editor

html

css

editor

image-size