57% image reduction and centering within the css structure

Question

Guy, I'm really stuck. I will go step by step and hope to make it short.

This is the html structure:

<li class="FAVwithimage">
     <a href="">
     <img src="pics/Joshua.png">
     <span class="name">Joshua</span>
     <span class="comment">Developer</span>
     <span class="arrow"></span>
     </a>
</li>

Before embedding css classes, a bit of information about a specific goal:

Change the image size (img) to 57%. If this cannot be done using css, then jQuery / javascript. For example: Original pic 240x240px, I need to resize it to 57%. This means that a 400x400 image will be larger after resizing.

After resizing, the image should be centered vertical and horizontal inside: 68x90 borders. So you have an LI element that has an A element, and inside A we are IMG, IMG is changed to 57% and where the maximum width can

, 68px 90px. , SPAN IMG.

:

<li class="FAVwithimage">
     <a href="">
     <span class="picHolder"><img src="pics/Joshua.png"></span>
     <span class="name">Joshua</span>
     <span class="comment">Developer</span>
     <span class="arrow"></span>
     </a>
</li>

span: display: block w = 68px, h = 90px. .

, , , . css , , .

---

li.FAVwithimage {
height: 90px!important;

}

li.FAVwithimage a, li.FAVwithimage:hover a {
height: 81px!important;

}

. : name, comment, arrow

, IMG.

li.FAVwithimage a span.picHolder{
/*put the picHolder to the beginning 
  of the LI element*/
position: absolute;
left: 0;
top: 0;
width: 68px;
height: 90px;
diplay:block;
border:1px solid #F00;

}

, picHolder. LI, .

li.FAVwithimage span.picHolder img

{
  -: 68px ;    : 90px ; } , 57% picHolder

, , :

alt text http://lookpic.com/i/169/2U12JC16.jpeg

Answer 1

, , 57% - 68x90, 57%. , max-width max-height ( IE6 , , JS-). , ?

, , , :

text-align: center;
line-height: 90px; /* height of parent */
vertical-align: middle;

, , , () .

, position: relative li? , , , float: left; (, , clear: left; li ).

Answer 2

( - - ), a , . : .