Para fazer isso basta ter uma imagem de fundo com o "empilhamento", veja o tutorial de como fazer essa imagem AQUI
Nossa efeito consiste em criar uma DIV com o fundo e dentro dela, a nossa foto
O posicionamento da foto será feito com as propriedades margin e margin-top e
o dimensionamento da mesma será com as propriedades max-width e max-height
isso fará com que as imagens não ultrapassem as margens independente de seu tamanho e ou proporção(largura/altura)
Vamos ao código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
<title>borda</title>
<style type="text/css">
.borda{
position:relative;
display:block;
float:left;
width:300px;
height:300px;
background-image:url("borda.png");
}
.borda img{
max-width:229px;
max-height:169px;
display:block;
margin:0 auto;
margin-top:58px;
}
</style>
</head>
<body>
<div class="borda"><img src="foto_011.jpg" alt="" /></div>
<div class="borda"><img src="lary2.jpg" alt="" /></div>
<br style="clear:both" />
<div class="borda"><img src="foto.jpg" alt="" /></div>
<div class="borda"><img src="boris_vallejo_psylocke.jpg" alt="" /></div>
<br style="clear:both" />
</body>
</html>
O resultado final é esse, repare que todas as fotos se encaixam na borda mesmo quando estão "em pé" ou quadradas
