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 ソリューションを使用してください。例: 元の写真は 240x240px です。サイズを 57% 変更する必要があります。つまり、400x400 の写真はサイズ変更後に大きくなります。

サイズ変更後、画像は 68x90 の境界内で縦と横の中央に配置する必要があります。つまり、A 要素を持つ LI 要素があり、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;

}

該当するのはそれだけです。次のクラスは含めていません: 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

{
max-width:68px!重要; max-height:90px!重要; これは、pic を 57% 縮小し、picHolder の中央に配置するクラスです。

ここに、必要なものを説明する図があります。

代替テキスト http://lookpic.com/i/169/2U12JC16.jpeg

4

2 に答える 2

1

57% について何を話しているのかわかりません。あなたの例から、具体的には 57% ではなく、68x90 に収まるようにスケーリングしたいと考えています。私が知る限り、 max-width と max-height を使用するとうまくいきます（ただし、IE6では機能しません。JS以外の回避策はないと思います）。しかし、なぜそれが中心にあると期待するのですか？

親のサイズがわかっているときに、サイズがわからない画像を中央に配置する最も簡単な方法は、親に設定することです。

テキスト整列: 中央;
行の高さ: 90px; /* 親の身長 */
垂直整列: 中央;

ただし、これに関する 1 つの問題は、ユーザーがフォント サイズを大きくすると、それに伴って行の高さが大きくなり、画像が垂直方向の中央に配置されなくなることです。

絶対位置については、あなたが持っposition: relativeていると思いますliか？また、おそらく代わりに使用することもできますfloat: left;（ただし、もちろんclear: left;、liの最後に要素が必要です）。

于 2010-03-30T20:37:26.897 に答える