CODEWITHSUNDEEP
javascripthtmlreactjs
Ali Husham
Ali Husham

Reputation: 936

How to make image size dependent on the parents font size

If the parent component is h1 I need the image size to be very big and if the parent size has a font of 20px I need the image component to reponed to that and change its size relative to the size of the font of the parent component.

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

Upvotes: 1

Views: 213

Answers (2)

Eloi
Eloi

Reputation: 476

Use em for image height, or for image width.

  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>

Upvotes: 2

shi
shi

Reputation: 55

you can get the fontSize of parent component to set image size dynamiclly, for example, get ref of parent component to get fontSize

Upvotes: 0

Related Questions