水平和垂直居中的iframe,宽高比为16:9,尽可能多地使用屏幕,而不会在任何地方裁剪

Question

水平和垂直居中的iframe,宽高比为16:9,尽可能多地使用屏幕,而不会在任何地方裁剪

Pus*_*ots 12 html javascript css iframe responsive-design

要求:

该HTML:iframe的HAS是一个包含div中.请参阅下面的代码.
CSS:容器应该能够具有任何有效的width并height使用vw和vh视口单元.Se代码如下.
是的,width并且height HAS在vw和vh.
永远不应裁剪静态视频预览图像.
静态视频预览图像应该不具有上述任何黑条及以下(宽银幕).
静态视频预览图像应该不具有任何黑条向左或向右(邮筒).
静态视频预览图像应在包含它的div内尽可能多地使用空间.
静态视频预览图像应始终保持16:9的宽高比.
滚动条应该永远不会出现.
静态视频预览图像应垂直居中,并在包含它的div内水平居中.
响应式网页设计.

调整浏览器或视口大小时,应满足上述所有要求.

HTML:

<div class="container">
   <iframe></iframe>
</div>

Run Code Online (Sandbox Code Playgroud)

CSS:

.container {
   width:90vw;
   height:50vh;
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

Eri*_*k.J 5

相同的解决方案,但没有额外的标记来保持比率.

JsFiddle完全不需要相同的评论.

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<title>Fully Container Centred Iframe</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style>
.container {
    display:table-cell; /* (specs: omitted table parts, the browser will insert mandatory elements in the dom tree) */
    position:relative;
    padding:; /* optional, margins ignored */
    width:100vw; /* any value */
    height:1vh; /* will expand by the :before element */
    overflow:hidden; /* hide eventual black bars */
    background:tan; /* bg-colors just for demo testing */
    vertical-align:middle;
    text-align:center;
}
.container:before {
    display:block;
    padding-top:56%; /* keeps the 16/9 ratio for the AP */
    height:0;
    background:red;
    content:"\a0";
}
.container iframe {
    position:absolute; /* to be ratio consistent */
    top:-.5%;
    left:-.5%; /* overflow eventual black bars */
    border:0;
    width:101%; /* grow some to avoid thinner black bars */
    height:101%;
    overflow:hidden; /* for html5 browsers the html attribute is depreciated */
    background:gold;
}
</style>
</head><body>

<div class="container">
    <iframe scrolling="no" src=""></iframe>
</div>

</body></html>

Run Code Online (Sandbox Code Playgroud)

Answer 2

rvi*_*hne 3

使用 JavaScript，您可以侦听该resize事件，每当浏览器窗口改变形状时就会触发该事件。然后，通过一些简单的代数，您可以根据容器的尺寸计算 iframe 的尺寸。这是一个显示所有要求的演示。

"use strict";

var container = document.querySelector('.container');
var frame = container.querySelector('iframe');

function resizeVideo() {
	frame.width = frame.height = 0;

	var width = container.offsetWidth;
	var height = container.offsetHeight;

	if (height * (16 / 9) <= width) {
		frame.height = height;
		frame.width = height * (16 / 9);
	} else {
		frame.width = width;
		frame.height = width * (9 / 16);
	}
}

window.addEventListener('load', resizeVideo);
window.addEventListener('resize', resizeVideo);

Run Code Online (Sandbox Code Playgroud)

.container {
	width: 90vw;
	height: 50vh;

	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

Run Code Online (Sandbox Code Playgroud)

<div class="container">
	<iframe src="https://www.youtube.com/embed/BKhZvubRYy8" frameborder="0" allowfullscreen></iframe>
</div>

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，4 月前
查看次数：	1572 次
最近记录：	9 年，4 月前