16：9宽高比 [英] 16:9 aspect ratio with fixed width

问题描述

如果我要嵌入YouTube视频

If I were to embed a YouTube video for example

<iframe width="560" src="http://www.youtube.com/embed/25LBTSUEU0A" class="player" frameborder="0" allowfullscreen></iframe>

使用jQuery可以设置一个宽高比为16：9的高度，如果宽度为560

我有这个jquery设置高度，但我不知道如何应用16：9的比例

Using jQuery would I set a height with an aspect ration of 16:9 so if the width is 560 the height should be 315px.
I have this jquery to set a height but I dont know how to apply the 16:9 ratio

$('.player').parent().attr('width', ':9ratio');

还是可以使用css整齐地完成？

or can this be done neatly using css?

推荐答案

宽高比只是width：height。因此，如果你想根据已知的高度计算宽度，这是很简单的。

Aspect ratio is just width:height. So if you wanted to calculate the width based on a known height it is pretty straightforward.

//width=560, wanted height is 315
$('.player').parent().attr('height', 560*9/16);

这篇关于16：9宽高比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！