在使用CSS旋转元素后，使用高度/宽度100％ [英] Using Height/Width 100% After Rotating an Element with CSS

问题描述

我有一个元素（视频），我想旋转，然后使用100％的宽度和高度。在应用旋转之前，视频占据100％的宽度和高度。旋转后，尺寸似乎保持相同，因为它之前，我旋转它。我想重新应用宽度和高度100％，以适应视频的新状态。

I have an element (a video) that I want to rotate, and then use 100% width and height. Before applying the rotation, the video occupies 100% width and height. After the rotation, the size seems to remain the same as it was before I rotated it. I'd like to re-apply width and height 100% to adapt the video the the new state.

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

The goal is to try and present the video in landscape even though the div (or phone) is in portrait orientation mode.

这里是我想要做的JSFiddle：
http://jsfiddle.net/a1sLp5gn/2/

Here's a JSFiddle of what I'm trying to do: http://jsfiddle.net/a1sLp5gn/2/

在小提琴中，点击按钮即可在所需的状态。

In the fiddle, click the button to see the video in the desired state.

视频包含在一个容器div中，表示框架由一个像手机屏幕（红色边框，我想填充这个div的视频）。

The video is contained within a container div that demonstrates it being framed by something like a phone screen (the red border, I want to fill this div with the video).

使用在单击按钮后运行的JS，我能够实现我的目标，但是我以一种丑陋的方式做它 - 我想知道什么是适当/最好的方式来实现我在做什么。

Using the JS that runs after clicking the button, I am able to achieve my goal, but I am doing it in a hackish ugly way - and I was wondering what is the appropriate/best way to achieve what I am doing.

这是CSS（更好地检查我提供的小提琴链接，我只是把它放在这里，因为stackoverflow需要一些代码，当有一个小提琴链接） p>

This is the CSS (better check out the fiddle link I provided, I'm only putting it here because stackoverflow requires some code when there's a fiddle link):

video {
      transform:rotate(90deg);
      height:100%;
      width:100%;
}

.container {
      border-style:solid;
      border-width:1px;
      border-color: red;
      height:640px;
      width:360px;
}

推荐答案

：
即使你旋转元素，高度，宽度，左和顶属性是计算未旋转的元素。您必须考虑容器维度并手动转换值。
通常旋转使元素的中心点作为参考。 （您可以用transorm-origin改变，但在这种情况下如果视频元素已经居中则不需要）

I hope this can help you: even you rotate an element, height, width, left and top properties are calculated on unrotaded element. You must consider container dimension and manually invert value. Normally rotation make element's center point as reference. (you can change with transorm-origin, but in this case is not necessary if video element is already centered)

$(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)"})
 });
});

这篇关于在使用CSS旋转元素后，使用高度/宽度100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！