react中如何动态调整img标签的尺寸, 以保证显示的图片不超过规定的长和宽

Question

问题描述

找不到方法动态的取得原始图片的宽和高

问题出现的环境背景及自己尝试过哪些方法

如果原始图片小img就按照原始图片尺寸来, 如果图片过大则img缩减为规定的宽和高
按照普通html的方式行不通啊

Answer 1

可以用object-fit属性，应该可以满足你的需求

可以做到保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。

img{
    width:50px;
    height:50px;
    object-fit:cover;
}

Answer 2

naturalWidth和naturalHeight可以获取图片元素的原始尺寸