问题描述
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.sized {
height: 100%;
position: relative;
background: #eee;
overflow:hidden;
padding:0;
}
.sized iframe {
position:absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
@media (min-width: 320px) {
height: 200%;
top: -50%;
}
@media (min-width: 640px) {
height: 180%;
top: -40%;
}
<div class="sized">
<iframe src="https://player.vimeo.com/video/135335257?autoplay=false" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
<h3>Original video</h3>
<iframe src="https://player.vimeo.com/video/135335257?autoplay=false" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
在snippets结果中得到cookie同源错误,这里是一个镜像:
As I get a cookies same origin error in the snippets result, here is a mirror:
[edit]也许,它利用了 top
和 bottom
padding
使用元素的 width
作为其值的基础。使用公式B /(A / 100)= C%,我们可以计算填充所需的百分比。给定视频具有16:9的比率,这转换为9 /(16/100)= 56.25。
One way to maintain the aspect ratio of an element is to use the "padding percentage" trick which takes advantage of the fact that top
and bottom
padding
uses the width
of the element as the basis for their value. Using the formula B / (A / 100) = C% we can calculate the required percentage for the padding. Given the video has a 16 : 9 ratio this translates to 9 / (16 / 100) = 56.25.
唯一的问题是,在你的情况下,计算是必需的水平和垂直轴(因为我们不知道视口将是什么尺寸),这个技巧将不能使用左
和右
以获得与
高度
相关的宽高比。
The only problem is that in your case the calculation is required for both the horizontal and vertical axis (as we don't know what dimensions the viewport will be) and this trick will not work with
left
and right
padding
to get the aspect ratio in relation to the height
.
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
background: #eee;
height: 100%;
overflow: hidden;
padding: 0;
position: relative;
}
.inner {
left: 50%;
min-height: 43.75%;
padding-top: 56.25%;
position:absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.container iframe {
bottom: 0;
height: 100%;
left: 0;
position:absolute;
right: 0;
top: 0;
width: 100%;
}
<div class="container">
<div class="inner">
<iframe src="https://player.vimeo.com/video/135335257?autoplay=false" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
</div>
(代码段不显示视频,请参阅小提示)
https://jsfiddle.net/w45nwprn/ (Snippet doesn't show video, please see fiddle)
幸运的是,在你的情况下,你想要的视频适合整个屏幕,所以视口单位可以用于计算宽高比,而不是百分比。这允许使用计算与
height
相关的 width
,反之亦然:
Luckily, in your case you want the video to fit the entire screen so viewport units can be used to calculate the aspect ratio instead of percentages. This allows use to calculate the
width
in relation to the height
and vica versa:
-
left:50%;
,top:50%;
>
> <$ c $>>
transform:translate(-50%,-50%);
c $ c> .container min-height:100%;
> min-width:100%;height
和width
不会小于.container
-
height:56.25vw;
将相对于视口的width
设置height
。这是通过执行9 /(16/100)= 56.25 -
width:177.77777778vh;
c> width 相对于视口的height
。这是通过执行16 /(9/100)= 177.77777778
left: 50%;
,top: 50%;
andtransform: translate(-50%, -50%);
are required to center theiframe
in.container
min-height: 100%;
andmin-width: 100%;
are required to ensure that theheight
andwidth
are never smaller than that of.container
height: 56.25vw;
will set theheight
in relation to thewidth
of the viewport. This is calculated by doing 9 / (16 / 100) = 56.25width: 177.77777778vh;
will set thewidth
in relation to theheight
of the viewport. This is calculated by doing 16 / (9 / 100) = 177.77777778
计算的。 height
和 width
不能低于 100%
,但必须保持正确的长宽比,覆盖整个视口。
Because the height
and width
can never be below 100%
but the must remain in the correct aspect ratio the video will always cover the whole viewport.
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
background: #eee;
height: 100%;
overflow: hidden;
padding: 0;
position: relative;
}
iframe {
box-sizing: border-box;
height: 56.25vw;
left: 50%;
min-height: 100%;
min-width: 100%;
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
width: 177.77777778vh;
}
<div class="container">
<iframe src="https://player.vimeo.com/video/135335257?autoplay=false" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
(代码段不显示视频,请参阅小提示)
https://jsfiddle.net/qk00ehdr/ (Snippet doesn't show video, please see fiddle)
,因此只要您不定位旧浏览器,此方法就可以正常工作。
Viewport units are widely supported, so as long as you are not targeting old browsers this method should work.
这篇关于缩放和重新定位iframe像background-size:cover的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!