0

さて、これが、アーティストのプロフィール写真、名前、ジャンルを含むサムネイルのシナリオです。名前は上部にあり、ジャンルは下部にあります。サムネイルのサイズは、幅だけでなく高さによっても制限する必要があります。名前が長くなると別の線が作成されるため、幅によって問題が発生します。これにより、他の要素が押し下げられ、サムネイル全体が長くなります。アーティストが名前に入力できる長さを制限したくないので、うまくいけばcssで解決策が必要です。

サムネイル全体を固定の高さに設定する必要がありますが、名前の余分な行を補うために画像を短くする必要があります。現時点では、余分な行がある場合、サムネイル全体がその余分な行より長くなります。名前に別の行がある場合、つまりコンテンツがコンテナの幅を超えている場合は、画像を短くする必要があります。

これを行う方法があることを願っています。要求された場合はcssとマークアップを提供しますが、このシナリオでどのように役立つかわかりません。私はこれをjqueryトピックに含めましたが、これがcssで実行できるかどうかはわかりません。

私が含めたサムネイルは問題を引き起こしているものです。jsfiddleではそうしていませんが、devサイトにあります。これがjsfiddleです。http://jsfiddle.net/6gmRG/。この質問には、マークアップとcssも含めました。

さて、これがサムネイルの1つのマークアップです。読みやすくするためにリンクなどを削除しました。

<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を使用して、特定のサムネイルラッパー内の各アーティスト名のスパンの高さを取得しました。次に、高さの値を使用して、アーティスト名に2行あるかどうかを判断しました。2行のテキストを表すためにマジックナンバーとして20を使用しました。独自の動的テスト値を考え出す必要があります。とにかく、スパンに2本の線があると判断したら、.artiststhumbnail兄弟の高さを調整します。次に、.artiststhumbnailの静的な高さを定義して、他のサムネイルラッパーと整列させることができます。

これにより、要件を順調に進めることができます。

于 2012-06-16T19:44:52.430 に答える