javascript - 如何使图像大小取决于父母的字体大小

Question

如果父组件是 h1，我需要图像尺寸非常大，并且如果父尺寸的字体为 20px，我需要图像组件对此做出响应，并相对于父组件的字体大小更改其大小。

<span style={fontSize:'10px'}>
        <img
          style={{ height: 'auto', maxHeight: '100px' }}
          alt='image not fount'
          src={user.imageUrl}
        />
      </span>
      <span> {username}</span>

Answer 1

使用 em表示图像高度或图像宽度。

  img{
    width:5em;
    }

    <h1>This is heading 1
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"/></h1>

    <h3>This is heading 1
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"/></h3>



    <h6>This is heading 1
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"/></h6>

Answer 2

可以通过获取父组件的fontSize来动态设置图片大小，例如获取父组件的ref来获取fontSize