Easiest Way To Learn HTML5 and CSS3 Coding

Sizing Images

Managing images may be frustrating at first because of the size, orientation and positioning. Also, huge images can be difficult and slow for the users of the website to view.

Sizing Images in HTML

HTML has width and height properties to size an image: width="x" and height="x". It is important to use % and not px in HTML. px is strictly a CSS attribute. This is very important to remember. While using HTML, remember that you should only use width and ignore height unless the element in which the image is contained has a specific height assigned to it.

Aspect Ratio

Aspect Ration of an image is the ratio of the width to the height. In HTML, height is calculated automatically once the width of an image is assigned and vice versa. Aspect ratioo keeps the image from looking distorted. Below are some examples to demonstrate the above point:

Image Size syntax
Original Size <img src="pix/sunset.jpg" alt="Sunset">
Image 100% pixels wide <img src="pix/sunset.jpg" alt="Sunset" width="100%">
Image 100% pixels high <img src="pix/sunset.jpg" alt="Sunset" height="100">
Image half the widthh <img src="pix/sunset.jpg" alt="Sunset" width="50%">
Image 100% wide and 50% tall <img src="pix/sunset.jpg" alt="Sunset" width="100" height="50" >

Sizing Images in CSS

The syntax for the height and width attributes in CSS is like width:x and height:x. The value should be a number followed by a CSS unit of measure such as px or % without any space between number and unit of meadsure. Just like as the case was in HTML, specifying one size (width or height), the opposite dimension's size is calculated automatically. Below are some examples to demonstrate the above point:

Image Size syntax
Original Size <img src="pix/Sunset.jpg" alt="rose">
Image 100 pixels wide <img src="pix/sunset.jpg" alt="Sunset" style="width:100px">
Image 100 pixels tall <img src="pix/sunset.jpg" alt="Sunset" style="height:100px">
Image half the widthh <img src="pix/sunset.jpg" alt="Sunset" style="width:50%">
Image 100% wide and 50% tall <img src="pix/sunset.jpg" alt="Sunset" style="width:100px; height:50px">

Whether you code the image size in HTML or do it in CSS, the viewers will see exactly same thing.