javascript - 使用 Angular2 按比例缩放

Question

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

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

在 codepen 中，缩小外部框将显示所需的功能: 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。

看看这个 stackblitz:https://stackblitz.com/edit/angular-vagpoq .我还在代码中包含了注释和解释。