css - 将图像缩小 57% 并在 css 结构中居中

Question

嘿，我真的被困住了。我会一步一步来，希望能缩短。

这是html结构:

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

在我粘贴 css 类之前，一些关于要完成的确切目标的信息:

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.

这就是我的想法:

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

这就是相关的。我没有包含以下类:名称、评论、箭头

现在不完整的类引用 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;

不过，有一个问题是，如果用户增加字体大小，行高也会随之增加，从而使图像不再垂直居中。

对于绝对定位，我假设你在 li 上有 position: relative？此外，您可能会使用 float: left; 代替(但当然您需要一个带有 clear: left; 的元素，然后在 li 的末尾)。