使用CSS旋转元素后使用高度/宽度100%

Using Height/Width 100% After Rotating an Element with CSS

本文关键字：高度 宽度 100% CSS 旋转 元素 使用      更新时间：2023-09-26

我有一个元素（视频）要旋转，然后使用100%的宽度和高度。在应用旋转之前，视频占据100%的宽度和高度。旋转后，大小似乎与旋转前保持不变。我想100%重新应用宽度和高度，以使视频适应新状态。

目标是尝试以横向方式呈现视频，即使div（或手机）处于纵向模式。

以下是我尝试做的一个JSFiddle：http://jsfiddle.net/a1sLp5gn/2/

在小提琴中，单击按钮以查看所需状态的视频。

视频包含在一个容器div中，该容器div演示了它被手机屏幕之类的东西框起来（红色边框，我想用视频填充这个div）。

使用点击按钮后运行的JS，我能够实现我的目标，但我做这件事的方式很糟糕——我想知道什么是实现我正在做的事情的合适/最好的方式。

这是CSS（最好查看我提供的fiddle链接，我之所以把它放在这里，是因为当有fiddle连接时，stackoverflow需要一些代码）：

video {
      transform:rotate(90deg);
      height:100%;
      width:100%;
}
.container {
      border-style:solid;
      border-width:1px;
      border-color: red;
      height:640px;
      width:360px;
}

我希望这能帮助您：即使旋转一个元素，也会在未旋转的元素上计算高度、宽度、左侧和顶部属性。您必须考虑容器尺寸并手动反转值。正常情况下，旋转使元素的中心点作为参考。（您可以更改横框原点，但在这种情况下，如果视频元素已经居中，则无需更改）

$(function() {
 $('button').click(function() {
   var container = $("video").parent()
   $('video').height($(container).width());
   $('video').width($(container).height());
   $('video').css('position', 'absolute')
   var px = $(container).width() / 2
   var py = $(container).height() / 2
   $('video').css('left', px-py).css('top', py-px);
   //$("video").css({"transform":"rotate(90deg)"})
 });
});
相关文章：