Shrinking image by 57% and centering inside css structure

Question

Hy, i'm really stuck. I'll 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 i paste the css classes, some info about the exact goal to accomplish:

Resize the picture (img) by 57%. If it cannot be done with css, then jquery/javascript solution. For example: Original pic is 240x240px, i need to resize it by 57%. That means that a pic of 400x400 would be bigger after resizing.

After resizing, the picture needs to be centered vertical&horizontal inside a: 68x90 boundaries. So you have an LI element, wich has an A element, and inside A we have IMG, IMG is resized by 57% and centered where the maximum width can

be of course 68px and maximum height 90px. No for that to work i was adding a SPAN element arround the IMG.

This is what i was thinking:

<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>

Then i would give the span element: display:block and w=68px, h=90px. But unforunatelly that didn't work.

I know it's a long post but i'v did my best to describe it very simple. Beneath are the css classes and a picture to see what i need.

---

li.FAVwithimage {
height: 90px!important;

}

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

}

That's it what's relevant. I have not included the classes for: name,comment,arrow

And now the classes that are incomplete and refer to 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;

}

Border is used just temporary to show the actuall picHolder. It is now on the beginning of LI, width and height is set.

li.FAVwithimage span.picHolder img

{
max-width:68px!important; max-height:90px!important; } This is the class wich should shrink the pic by 57% and center inside picHolder

Here I have a drawing describing what i need:

Answer 1

As far I can remember (out of the web dev world for a while), a is an inline element and you can't set its height. You could try adding a display:block to a elements.

Answer 2

I don't know what you're talking about with the 57% - from your example, you want to scale to fit within 68x90, not 57% specifically. As far as I can tell, using max-width and max-height works for that (though won't work in IE6, and I don't think there's a non-JS workaround for that). But why do you expect it to be centered?

The easiest way to center an image you don't know the size of, when you do know the size of the parent, is to set on the parent:

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

One problem with this though, is that if the user increases the font size, the line-height increases along with it, making the image(s) not centered vertically anymore.

For the absolute positioning, I assume you have position: relative on the li? Also, you could probably use float: left; instead (but of course you'd need an element with clear: left; at the end of the li then).