Question

摘要：100％宽度和高度的嵌入将其父项大小推至祖父母的宽度和高度的100％。如何让embed元素折叠它周围的所有空白区域，使其完全适合其父级的宽度和高度？

我有一个带有图片的页面，点击后会被播放快速电影的嵌入元素取代。

问题在于嵌入式电影周围有很多空白区域。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head><title></title></head>
    <body>
        <div style="border:1px solid #000;">
        <embed id="iframeMovie" height="100%" width="100%" controller="true" target="myself" href="" src="http://images.apple.com/quicktime/troubleshooting/mov/qt_installed.mov" type="video/quicktime"></embed>
        </div>
    </body>
</html>

视频的大小未知，那么如何在保持100％的高度和宽度的同时摆脱这个空白？

编辑：虽然它没有显示，但实际上我正在清除填充和边距。白色空间仍然存在。

编辑2：有问题的空白区域位于电影和黑色边框之间，而不是黑色边框和浏览器。

Answer 1

您是否清除了默认的浏览器边距和填充？否则，你需要这样做。

大多数人使用CSS重置样式来标准化浏览器的边距和填充。一个好用的是Eric Meyer的：CSS Reset

编辑：要删除嵌入下方的空间，请在嵌入上设置display：block。请参阅：http://media.nodnod.net/embed.html

Answer 2

WOOHOO，我已经搜了很长时间才得到这个答案，我终于找到了它！您必须将embed元素放在iframe或框架中的对象元素中：
iframe页面

<html>
<body>
<iframe src="sample.html" height="100%" width="100%">
</iframe>
</body>
</html>

iframe来源

<html>
<body>
<object height="100%" width="100%">
<embed src="sample.mov" height="100%" width="100%"/>
</object>
</body>
</html>

确保iframe，object和embed元素中的高度和宽度值相同。

Answer 3

我不熟悉嵌入元素，但在我看来，当你将宽度设置为100％时，你将它设置为父元素的宽度，在这种情况下这是一个div而div占据整个可用宽度，因为它是一个块元素。

因此，您可以浮动周围的div或将其显示为内联，以使其大小适应内容而不是周围的可用空间。

Answer 4

尝试在div和嵌入元素上设置float：left，就像这样。这将消除额外的空白区域。

<div style="border:1px solid #000; float: left; width: 100%; height: 100%;">
   <embed id="iframeMovie" height="100%" width="100%" style="float: left" controller="true" target="myself" href="" src="http://images.apple.com/quicktime/troubleshooting/mov/qt_installed.mov" type="video/quicktime"></embed>
</div>

Answer 5

嗯...

这是一个丑陋的黑客，但你可以使用一个表：

<table width="100%" height="100%">
  <tr>
    <td align="center" valign="middle"><embed /></td>
  </tr>
</table>

Answer 6

您是否使用DOM检查器验证空格不是嵌入的一部分？

另外，你可以将它放在panel / div / etc中并与css混淆：

position: relative; top: -10px; left: -10px; overflow: hidden;

Answer 7

事实证明除了通过使用scale="aspect"使电影缩放到父级的大小之外，没有办法做到这一点。

虽然不是完美的解决方案，但现在必须要做。

如何摆脱<embed />元素周围的空白区域？

7 个答案: