Menu
I'm very very new on HTML and CSS development.
I have a HTML page with an img tag. This tag will hold some images. These images has different sizes. I set up a width and height to img tag using CSS.
All images will be shown using JavaScript.
May I need to resize images with JavaScript before I assign an image to IMG tag?
Maybe, I don't need to do that because I set up IMG size using CSS. Proportions will be constrained?
Sorry for my English.
769
All this can be done in JavaScript, since you have access to input image original height ( img. width ) and width using ( img. width ). For example, we can fit the output image in a container of 300x300 dimension.
One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element. The values are set in px i.e. CSS pixels. For example, the original image is 640×960.
In plain JavaScript, you can directly modify the CSS width and height property of the image. The following example demonstrates this by altering the CSS width property by specifying the absolute value in pixels and leave the browser to calculate the corresponding height while maintaining the aspect ratio.
The aspect ratio wont be maintained if you have set both the height and width using css. But if you specify any one of the properties using the html img tag then the aspect ratio would be maintained.
107
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
