1

我的问题分为三个部分

第 1 部分：显示图像的动画图像标题（这部分在示例第一行http://jsfiddle.net/JBnbG/32/中完成）

第 2 部分：在 150x150 尺寸的 div 中显示 youtubehqdefault.jpg缩略图的中心部分（这部分在示例中也作为第二行完成）

第 3 部分：我想将第 1 部分和第 2 部分功能集成到第 3 部分中。问题是标题有效，但图像未在中心对齐，如示例第二行所示。

示例在http://jsfiddle.net/JBnbG/32/

我不能改变结构，否则它不会工作标题部分正常工作

如果有人可以帮助解决保持 HTML 结构完整的问题，我将不胜感激

4

2 回答 2

1

我想我的问题是，您是从 youtube 动态加载示例 html，还是仅加载图像？

如果 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 回答