Question

我有一行嵌入对象（span9）和嵌入式iframe（span3）

我设法响应各种屏幕尺寸的视频，但是，iframe保持固定的大小，并且与它旁边的嵌入对象的高度不匹配。

这是我到目前为止的代码：

  <div class="row-fluid">
<!--Video-->
<div class="span9">
   <div class="flex-video widescreen">
     <object type="application/x-shockwave-flash" height="100%" width="100%" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=theabraxas" bgcolor="#000000"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="allowNetworking" value="all" /><param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" /><param name="flashvars" value="hostname=www.twitch.tv&channel=theabraxas&auto_play=true&start_volume=25" /></object>


   </div>
</div> 
<!--Chat-->

以下是＆＃39; flex-video＆＃39;的CSS：

    .flex-video { position: relative;
padding-top: 25px;
padding-bottom: 67.5%;
height: 0;
margin-bottom: 16px;
overflow: hidden;
}

.flex-video.widescreen { padding-bottom: 57.25%; }
.flex-video.vimeo { padding-top: 0; }

.flex-video iframe,
.flex-video object,
.flex-video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

（编辑8/12 - 看了更多我看到JSFiddle似乎对这些类型的问题使用了很多，这里有我对该行的看法：http://jsfiddle.net/D2RLR/6619/任何建议都会非常有用理解）

我不是一个网络/设计人员（更不用说_anything的编码器）所以我不会复制其他一些CSS，等等我已经尝试了，但任何建议都会非常感谢。

谢谢！

修改：此版本的实时版本，以便您可以在我的测试网站上找到我正在谈论的内容：http://theabraxas.us

Answer 1

如果不确切知道自己在寻找什么，我可能会尝试一些事情：

删除父级（<div class="flex-video">）overflow: hidden样式，或将其更改为overflow: visible。这将阻止父母隐藏额外内容。然后，您可以将iframe的高度更改为您认为合适的任何高度。
删除父级的height: 0样式并删除iframe的position: absolute样式。再次，您可以将iframe的高度更改为您想要的任何高度。
将父级的高度更改为与iframe的高度相同的值。

其中任何一个都应该有效，但它们都需要访问父元素，所以我希望你能控制它：）

Bootstrap将span列扩展到相同的高度

1 个答案: