如何解决如何在编辑器中显示图像保持率
在编辑器中,我上传了一张图片,我想在那个 div 容器中显示这张图片并保持图片比例?
我可以吗?我可以得到我上传到编辑器的 imaze 大小吗?
解决方法
如果您给图像设置 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
宽度改变,高度也会自动改变。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。