使用webkit transform scaleY

Question

我试图让html5视频元素“响应”。它的宽度几乎是100％，但它只需要一点额外的宽度，夹子的高度也有点太多了。所以我做了以下事情：

css: 
    video {
         width:100%;
         height:auto; //seemingly does nothing
    }

js:
$('video').css("-webkit-transform-origin","50% 0 0");
$('video').css("-webkit-transform","scaleY(0.75)");

此解决方案的问题如下：

所以基本上这里只有一个巨大的差距，视频元素说高度是776px，但如果我这样做：

jQuery('video').height()

返回scaleY之前的高度，大约1000px，无论我做什么来检索视频元素的高度，例如innerHeight，outerHeight offsetHeight等它将始终返回scaleY之前元素的旧高度。所以..我的解决方案是将视频包装在容器元素中：

<div class="col-sm-12 video-container">
     <video  autoplay loop>
         <source src={{ video }} type="video/mp4">
     </video>
</div>

然后选择那个外部元素并将高度设置为767px，这实际上有效，问题就在于，当我在笔记本电脑屏幕上打开它时，然后767px关闭，那么视频元素上的scaleY使它更多像567px一样，因此缩放显然需要考虑屏幕高度，但此时我有点丢失。我有一些可能的解决方案：

• 将自己的剪辑更改为特定高度并使用 mediaqueries改变它，这将改善质量 视频以及（现在质量是可以接受的，我想我需要大量的媒体查询来实现这一点。）
• 弄清楚如何获得scaleY的结果（为什么这不可访问？必须如此），如果我可以获得该高度，我可以将容器元素设置为相同的高度，并修复所有内容。
• 还有其他想法吗？也许smt非常聪明！ ：）

谢谢！

Answer 1

您是否尝试过使用：

video {
  width: 100%    !important;
  height: auto   !important;
}