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类之前，有关完成目标的一些信息：

将图片大小调整（img）57％。如果用css无法完成，那么jquery / javascript解决方案。例如：原始图片是240x240px，我需要调整57％。这意味着调整大小后400x400的图片会更大。

调整大小后，图片需要居中   垂直和水平内部a：68x90   边界。所以你有一个LI元素，   它有一个A元素，在A里面我们   有IMG，IMG调整大小为57％   居中最大宽度

当然是68px和最大高度   90像素。不，我正在加入   IMG周围的SPAN元素。

这就是我的想法：

<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重要的; 最大高度：90像素重要; } 这是一个应该将图片缩小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;代替（但当然，您需要在li结尾处使用clear: left;的元素）。

Answer 2

到目前为止，我记得（在网络开发世界中有一段时间），a是一个内联元素，你无法设置它的高度。您可以尝试将display：block添加到元素中。

缩小图像57％并在css结构内居中

2 个答案: