{"id":19324,"date":"2020-07-11T01:55:14","date_gmt":"2020-07-11T08:55:14","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=19324"},"modified":"2020-12-29T13:06:29","modified_gmt":"2020-12-29T21:06:29","slug":"html-image-size","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/html-image-size\/","title":{"rendered":"HTML Image Size"},"content":{"rendered":"\n

The HTML image size refers to the height and width of an image. They are listed as HTML attributes on the <\/em><img><\/em> element. Here\u2019s how to set them.<\/em>
<\/p>\n\n\n\n

Syntax<\/h2>\n\n\n\n

The syntax for setting the width and height attributes of an <img><\/code> tag is:<\/p>\n\n\n\n

<img src="<name of website>" alt="<alt tag>" height="<in px>" width="<in px>" \/><\/pre><\/div>\n\n\n\n
Here\u2019s a code snippet showing how it works: 
<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n <head>\n   <meta charset="utf-8">\n   <meta name="viewport" content="width=device-width">\n   <title>repl.it<\/title>\n   <link href="style.css" rel="stylesheet" type="text\/css" \/>\n <\/head>\n <body>\n   <h1>Image Size in HTML<\/h1>\n   <h2>without attributes<\/h2>\n   <img src="http:\/\/placekitten.com\/500\/500" \/>\n   <h2>with attributes<\/h2>\n   <img src="http:\/\/placekitten.com\/500\/500" width="300" height="300" \/>\n   <script src="script.js"><\/script>\n <\/body>\n<\/html><\/pre><\/div>\n\n\n\n
The height and the width of the <img><\/code> element is a number in pixels (in between quotes). It is a good idea to indicate both height and width attributes so that the space is allocated for the image before the web page loads. If the size of the image is not indicated prior to page render, the page will adjust it\u2019s layout as the image loads. 
<\/p>\n\n\n\n
Browser Support<\/h3>\n\n\n\n
The width and height attributes of an <img><\/code> element is supported on all web browsers.<\/p>\n\n\n\n