width and height of an image


width: ***; height: ***;

Browser
Internet Explorer Firefox Opera

The width property specifies the width of an element, and the height property specifies the height of an element.

The width and height of the image can be specified by applying these properties to the IMG element.


img {
width: 200px;
height: 100px;
}


Property Value Explanation
width length, %, or auto the size of the width
height length, %, or auto the size of the height

The default is "auto".

Tips and Notes

The data size of the image doesn't change even if the size is changed by these properties.


Example

Example
Sample image
(width:200px, height:133px)


<html>
<head>
<title>TAG index</title>

<style type="text/css">

#example1 {
width: auto;
height: auto;
}

#example2 {
width: 300px;
}

#example3 {
width: 150px;
}

#example4 {
width: 100%;
height: 133px;
}

</style>

</head>
<body>

<p><img src="image/photo.jpg" alt="Example" id="example1"> (width:auto, height:auto)</p>

<p><img src="image/photo.jpg" alt="Example" id="example2"> (width:300px, height:auto)</p>

<p><img src="image/photo.jpg" alt="Example" id="example3"> (width:150px, height:auto)</p>

<p><img src="image/photo.jpg" alt="Example" id="example4"> (width:100%, height:133px)</p>

</body>
</html>
Output

Example (width:auto, height:auto)

Example (width:300px, height:auto)

Example (width:150px, height:auto)

Example (width:100%, height:133px)