CSS: Dimensions - Setting the Width with Pixels
(Page 2 of 5 )
Here we will adjust the width of the image using pixels:
<html>
<head>
<style type="text/css">
img.sample
{
width: auto
}
img.secondsample
{
width: 150px
}
img.thirdsample
{
width: 10px
}
</style>
</head>
<body>
<img class="sample" src="gorilla.gif" width="100" height="80" />
<br />
<img class="secondsample" src="gorilla.gif" width="100" height="80" />
<br />
<img class="thirdsample" src="gorilla.gif" width="100" height="80" />
</body>
</html>
And once more, you can also set it using percentages:
<html>
<head>
<style type="text/css">
img.sample
{
width: auto
}
img.secondsample
{
width: 150%
}
img.thirdsample
{
width: 10%
}
</style>
</head>
<body>
<img class="sample" src="gorilla.gif" width="100" height="80" />
<br />
<img class="secondsample" src="gorilla.gif" width="100" height="80" />
<br />
<img class="thirdsample" src="gorilla.gif" width="100" height="80" />
</body>
</html>
Next: Setting the Maximum Height and Minimum Height >>
More Style Sheets Articles
More By James Payne
/ 2 
