与Angular2成比例缩放

Question

我需要在Angular2应用中实现一个保留缩放比例的部分（例如，将youtube视频嵌入网站时）。我不能使用iframe，因为它会使传递数据变得非常复杂。

这是一个使用jQuery解决方案的示例： https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/

在代码笔中，缩小外部框将显示所需的功能： https://codepen.io/chriscoyier/pen/VvRoWy

// from original article:
var scale = Math.min( 
  availableWidth / contentWidth, 
  availableHeight / contentHeight 
);

在Angular2中有比在jQuery中混合更好的方法吗？我看到了一些库，但没有可悲的展示功能的演示。欢迎任何建议。谢谢

Answer 1

我已经将代码从jQuery解决方案（https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript）“翻译”到Angular。

签出此堆叠闪电战：https://stackblitz.com/edit/angular-vagpoq。我还在代码中包含了注释和解释。