3

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

这是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 解决方案。例如：原始图片为 240x240 像素，我需要将其大小调整 57%。这意味着调整大小后 400x400 的图片会更大。

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

当然是 68px 和最大高度 90px。不，我在 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;

}

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

现在是不完整的类，请参考 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 中居中的类

在这里，我有一张描述我需要的图：

替代文字 http://lookpic.com/i/169/2U12JC16.jpeg

4

2 回答 2

1

我不知道您在说 57% 是什么 - 从您的示例中，您希望缩放以适应 68x90，而不是 57%。据我所知，使用 max-width 和 max-height 可以解决这个问题（尽管在 IE6 中不起作用，而且我认为没有非 JS 的解决方法）。但是你为什么期望它居中呢？

当您知道父级的大小时，将不知道大小的图像居中的最简单方法是在父级上设置：

文本对齐：居中；
行高：90px；/* 父级的高度 */
垂直对齐：中间；

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

对于绝对定位，我假设您position: relative在li? 此外，您可能可以float: left;改用（但当然您需要clear: left;在 li 末尾添加一个元素）。

于 2010-03-30T20:37:26.897 回答
0

据我所知（暂时离开了网络开发世界）， a 是一个内联元素，你不能设置它的高度。您可以尝试将 display:block 添加到元素。

于 2010-03-26T09:32:19.870 回答