|
Web Design Tips
FrontPage Universe
One image, many
sizes
Sometimes you want to add one particular image to various webpages,
but you want each instance of the image to be a different size. Here
is a quick and easy method of doing that using CSS. To your style
sheet in your <head> area, include the following classes. Modify the
width and heights to your own specifications.
<style type="text/css">
img.regular
{
height:auto;
width:auto;
}
img.larger
{
height: 100px;
width: 526px
}
img.smaller
{
height: 25px;
width: 132px
}
</style>
To the specific images that you wish to resize add the applicable
class id as illustrated below.
<img class="regular" src="http://images.frontpageuniverse.com/frontpageuniverse/images/header_logo.gif"
width="263" height="50">
<img class="larger" src="http://images.frontpageuniverse.com/frontpageuniverse/images/header_logo.gif"
width="263" height="50">
<img class="smaller" src="http://images.frontpageuniverse.com/frontpageuniverse/images/header_logo.gif"
width="263" height="50">
|
