<style type="text/css">
img.resizeimg
{
max-width:100px;
/*Или в процентах
width:15%
Или в пикселях
width: 100px;*/
}
img.resizeimg:hover
{
width:auto;
height:auto;
}
</style>
<img class="resizeimg" alt="" src="img/birds.jpg" />
Теперь, собственно, само отображение, не дающее выйти изображению за пределы Вашего слоя, однако при наведении курсора на картинку, показывающее его (изображения) реальный размер.
CSSGLOBE предлагает (в этом случае) более навороченный вариант (требуются две картинки малоформатная и крупноформатная):
<style type="text/css">
ul#gallery, ul#gallery li{
margin:0;
padding:0;
list-style:none;
}
ul#gallery{
margin:2em 0;
}
ul#gallery li{
float:left;
display:inline;
margin-right:5px;
}
ul#gallery a{
float:left;
display:inline;
position:relative;
}
ul#gallery a:hover{
background:none;
z-index:100;
}
ul#gallery a span{
display:none;
}
ul#gallery a:hover span{
float:left;
display:block;
cursor:pointer;
}
ul#gallery a:hover em{
display:none;
}
ul#gallery a img{
border:1px solid #999;
padding:2px;
background:#fff;
}
ul#gallery a:hover img{
border:1px solid #000;
}
</style>
<ul id="gallery">
<li>
<a href="#">
<em><img src="img/birds_small.jpg" alt="gallery thumbnail" /></em>
<span><img src="img/birds.jpg" alt="gallery image" /></span>
</a>
</li>
</ul>
Вот так будет выглядеть: