时间戳

首页 > 解决方案 > 如何在编辑器中显示图像保持率

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

问题描述

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

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

我可以做吗？我可以得到我上传到编辑器的图像大小吗？ 在此处输入图像描述

标签： htmlcsseditorimage-size

解决方案

如果你给width: 100%;图像，高度会根据height: auto;风格自动调整。

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

如果你有 and img 标签和源，你可以得到img.naturalWidthand 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宽度发生变化，高度也会自动变化。

推荐阅读