Question 225337 in Html Question posted in
Some basic documentation can be found here.

Html – The image height attribute is not working

I have a problem with my image : the height attribute is not working. Here is my code :

<img
                                    alt="..."
                                    className="img-fluid floating"
                                    src={Landing1}
                                    style={{ height: '300px', width: 'auto' }}
                                />

And when I try this code :

<img
                                    alt="..."
                                    className="img-fluid floating"
                                    src={Landing1}
                                    style={{ width: '300px', height: 'auto' }}
                                />

The width attribute is working but still not the height.
And when I try this code :

<img
                                    alt="..."
                                    className="img-fluid floating"
                                    src={Landing1}
                                    width={375}
                                />

Nothing is working…

Tags:

2

Answers


  1. 0

    Dont style the element directly, instead wrap it in a element and style it like this:

    <div style={{width:20px}}>
 <img src={""} style={{width:"100%" }}/>
</div>

    The hieght is by default auto and try not to set the height of an img element or its parent element because it may change the original aspect ratio of the image.

    Login or Signup to reply.
  2. 0

    In react, just use style = {{height: 300}}, not style = {{height: '300px'}}, since a number only will represent pixels. Also, check if the parent element is limiting the maximum height.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search