1

私の質問には 3 つの部分があります

パート 1: 画像のアニメーション画像のキャプションを表示するには (この部分は、例の行 1 のように行われますhttp://jsfiddle.net/JBnbG/32/ )

パート 2: YouTubehqdefault.jpgサムネイル画像の中央部分を 150x150 ディメンションの div で表示します (この部分も例の 2 行目として行われます)

パート 3: パート 1 とパート 2 の機能をパート 3 に統合したい。

例はhttp://jsfiddle.net/JBnbG/32/にあります

構造を変更できません。そうしないと、キャプション部分が正しく機能しません

HTML構造をそのまま維持することで問題を解決するのに役立つ人がいれば幸いです

4

2 に答える 2

1

私の質問は、例の html を youtube から動的にロードしているのか、それとも画像だけをロードしているのかということだと思います。

html があなたのものであれば、それは単純なスタイル調整です。

私はjsfiddleでフォークしました。これがあなたの言いたいことだと思います。

スタイリングがどうなったかはよくわかりませんが、イメージを設定しました

id="ContentPlaceHolder1_rptVideos_imgVideo_1" style="height:auto; width:200px;margin-left:-25px;"

または、別の方法は次のとおりです。

left:-25px; position:relative;

ところで、これらのスタイルはすべて、スタイルシートでクラスとして宣言する必要があります。

HTML を動的にロードしている場合は、同じことを実現する JavaScript をコメントアウトしました。

作業内容によっては、php を使用している場合は、適切なサイズに自動トリミングするスクリプトを取得する必要がある場合があります。Timthumb.php は最も注目に値するものですが、完全に防弾とは言えないセキュリティ上の問題がありますが、そのままではかなり堅実です。

乾杯！

于 2012-07-05T04:57:50.910 に答える
0

この作業コードを確認してください: http://jsfiddle.net/surendraVsingh/JBnbG/39/

CSS で行う変更:

.VideoContainer  > span {
    display: block;    
}
.VideoContainer > span > img {
    display: inline-block;
    margin-left: -60px;
    margin-top: -25px;
}
于 2012-07-05T05:06:44.463 に答える