html - css + html : relative percentages?(媒体查询)

Question

大家好，奇怪的情况，我不知道如何解决这个问题。

我正在尝试使用媒体查询访问响应式网站。嵌入式 YouTube 视频也应该响应布局，因此我尝试将每个视频的宽度设置为 100% 并按比例计算其高度!

结果是这样的:

<p class="youtube-vid">
<object width="100%" height="61%">
<param name="movie" value="http://www.youtube.com/v/rBa5qp9sUOY?version=3">
<param name="allowFullScreen" value="true">
<param name="allowscriptaccess" value="always">
<embed src="http://www.youtube.com/v/rBa5qp9sUOY?version=3" type="application/x-shockwave-flash" width="100%" height="61%" allowscriptaccess="always" allowfullscreen="true">
</object>
</p>

所以当从 youtube 嵌入时，这个视频最初是 500 像素 x 306 像素。

问题是这个东西可能真的有用，但我不知道百分比指的是哪里。其中 100% 的宽度是完全正确的并且依赖于我的布局 61% 的高度是不正确的。 61% 是正确的数字，但它看起来不对，因为它可能是某个外部容器或其他东西的 61%。

知道如何解决这个问题。我只是希望我的视频 100% 与(现在是正确的 - 即使在调整大小时)和比例高度取决于视频的原始值？

Answer 1

height 和 width 是分开计算的，与原始纵横比无关。尝试只设置 height="100%" 而根本不设置 width。我知道这适用于图像以保持纵横比，但我不确定它是否也适用于对象。