0

好的，这就是我有一个包含艺术家个人资料图片、名称和流派的缩略图的场景。名称在顶部，流派在底部。缩略图的大小需要受高度和宽度的限制。宽度会导致问题，因为当名称较长时会创建另一行。这会向下推其他元素，使整个缩略图更长。我不想限制艺术家可以在名称中输入的长度，因此希望在 css 中提供解决方案。

我需要将整个缩略图设置为固定高度，但需要缩短图像以补偿名称中的额外行。目前，如果有一条额外的线，则整个缩略图都会使该额外的线更长。如果名称中有另一行，或者换句话说，如果内容超过容器宽度，我需要缩短图像。

我希望有办法做到这一点，如果需要，我会提供 css 和标记，但我看不出它在这种情况下有什么帮助。我已将其包含在 jquery 主题中，但我不确定这是否可以仅使用 css 完成。

我包含的缩略图是导致问题的那个。它不是在 jsfiddle 上这样做，而是在开发站点上。这是jsfiddle；http://jsfiddle.net/6gmRG/。我还在这个问题中包含了标记和 css。

好的，这是其中一个缩略图的标记。我删除了链接等以便于阅读：

<div id="thumbnailwrapper">

 <!--link here-->

 <a href="">

  <!--name here-->

   <b>The Birdman Rallies</b><br>

    <div id="artiststhumbnail">

     <!--image here-->

      <img src="http://newbornsounds.coffeecup.com/artistspictures/The%20Birdman%20Rallies/lamps.jpg" height="100%" alt="The Birdman Rallies" border="0" >
     </div>

     <div id="genre">Electro/acoustic blend</div></a>

</div>

这是缩略图的 css，我删除了过渡和框阴影效果以便于阅读：

#thumbnailwrapper {
width:137px; color:#2A2A2A; margin-right:5px; 
border-radius:0.2em; margin-bottom:5px;
background-color:#E9F7FE; padding:5px;
border-color:#DADADA; border-style:solid;
border-width:thin; font-size:15px
}

#artiststhumbnail {
width:133px; height:130px;
text-align:center;overflow:hidden;
border-color:#DADADA;
border-style:solid; border-width:thin; 
background-color:white; display:inline-block;
}

#genre {
font-size:12px; font-weight:bold;
color:#2A2A2A
 }
4

2 回答 2

0

问题出在您的 img 标签中。你已经定义了高度 100%。这就是它调整大小的原因。

尝试添加

#artistthumbnail img {
width:130px;
height:133px;
}

看看有什么作用。

于 2012-06-16T16:38:08.480 回答
0

好的，这是一个快速演示。你可以在这里看到我的小提琴代码：http: //jsfiddle.net/nickadeemus2002/TdLq4/1/

它仅用作技术/指南。当然，它还没有准备好生产。

这是我在该方法背后的想法。我将艺术家姓名嵌套在一个跨度内。然后我使用 jquery 来获取给定缩略图包装器中每个艺术家姓名的跨度高度。然后我使用高度值来确定艺术家姓名是否有两行。我用 20 作为我的幻数来表示两行文本。您必须提出自己的动态测试值。无论如何，一旦我确定一个跨度有两行，我就会调整 .artiststhumbnail 兄弟的高度。然后我可以为 .artiststhumbnail 定义一个静态高度，使其与其他缩略图包装器对齐。

这应该会让你在你的要求上取得进展。

于 2012-06-16T19:44:52.430 回答