image resizing with CSS
Hi Richard,
I'm somewhat new to CSS, at least to using it for page layouts. I recently purchased your book "Beginning CSS for Web Design". In Chapter 10 (Liquid Design/Box Model), you mention that you use images slightly larger than you need so that the design scales gracefully. I tried incorporating the code you used in the book into my own, but I'm not having much success. In IE 6, the image does not resize, and in Firefox it does, but it's horribly pixelated. My question is, how can I achieve this without the image looking so bad?
Here's my CSS code: (am I missing something?)
body {
margin: 0;
padding: 0;
background: url('../images/bg_3.gif') repeat;
}
div#logosearch {
width: 48em;
background-color: #FFFFFF;
margin: 0 auto;
}
div#logosearch > a > img {
width: 12em;
height: auto;
}
Here's the HTML:
<body>
<div id='logosearch'>
<a href=''><img src='images/igroup_logo.jpg' alt='immixGroup Logo' /></a>
</div>
</body>
Any help you can provide would be much appreciated!
|