resize <img> pic based on original image size

user_17265725 0
Viewed 26

When getting an image file to use in an tag in a react app that uses bootstrap, sometimes I end up with a small image in a big image container and it looks pretty bad. Therefore, I would like to get the original image size, and then if it is too small, scale it based on its original height and width. The images are kept in the react app's server, under "upload/images". Ex. "uploads/images/John_Doe.png", and the image source is contained in the variable "user.pfp"

<img className="mx-auto d-block" src={user.pfp} style={{maxWidth:'400px', maxHeight:'325px', scale: {*user.pfp height < 100 pixels and user.pfp width < 100 pixels* ? "200%" : "100%"}} />

I do not know how to find the original image's height and width based on the image source in order to determine whether or not it needs to be scaled.

And while we are on the subject, i'm new to react and html image containers in general. What's the correct syntax for "less than" and "and" in these cases?

reactjs image html
1 Answers

<p><img src="image/example.jpg" alt="Example1" width="193" height="130"> (width:193px, height:130px)</p>

<p><img src="image/example.jpg" alt="Example2" width="96" height="65"> (width:96px, height:65px)</p>

<p><img src="image/example.jpg" alt="Example3" width="100%" height="130"> (width:100%, height:130px)</p>

Source: www.tagindex.net

user_125519250
Related