像视频元素一样缩放div。
我想像html5视频标签一样缩放div。
你可以在我的代码示例中看到，视频会随着视口高度的变化而缩放。https:/glitch.comedit#! flawless-coconut-mole?path=index.html%3A17%3A99。
我想要同样的效果，但要用一个div。这个div里面会有一个iframe（Youtube Iframe）。我可以让iframe保持16:9的纵横比，但我不能让它的容器改变高度，从而使它的子代也随之缩放。
如果有任何帮助，我将感激不尽
你可以使用 vh 单元在你的CSS中。下面是一个例子。
var sizeElement = document.getElementById('window-size');
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight
sizeElement.innerText = `Window size: ${windowWidth} x ${windowHeight}`;
var iframeElement = document.getElementById('iframe-size');
var iframe = document.getElementsByTagName('iframe')[0];
var iframeWidth = iframe.clientWidth;
var iframeHeight = iframe.clientHeight;
iframeElement.innerText = `iframe size: ${iframeWidth} x ${iframeHeight}`;
var totalSizeElement = document.getElementById('total-size');
totalSizeElement.innerText = `iframe width is ${Math.round(iframeWidth * 100 / windowWidth)}% of window width. iframe height is ${Math.round(iframeHeight * 100 / windowHeight)}% of window height.`;.container {
background-color: gray;
/* Makes sure the iframe is visible */
height: 9vh;
width: 16vh;
/* Maintain aspect ratio */
}
iframe {
/* iframe takes up entire container */
width: 100%;
height: 100%;
}<div class="container">
<iframe></iframe>
<div>
<p id="window-size"></p>
<p id="iframe-size"></p>
<p id="total-size"></p>如果你点击 "全页 "并调整浏览器的大小，你的 <iframe> 将按比例大小。
vh 和 vw 分别是视口高度和宽度的单位。1 vh 相当于视口高度的1100。您可以使用 max-width 和 min-width以及它们的高度对应物，以限制它们的大小。<iframe> 可以得到。
首先是你的 script 标签应该在 head 标签后或在 body 标签，最好的方法是给你写上你的 JavaScript 逻辑就在你的body标签后(为了加快你的网页加载速度).就像这样......你可以用div来包装你的iframe标签：PS：你需要删除默认的高度和宽度属性。
你可以用div包装你的iframe标签：PS：你需要去掉默认的高度和宽度属性。
<div class="embed">
<iframe src="https://www.youtube.com/embed/4VIy9lF_EHg" allowfullscreen </iframe>
</div>
并使用 CSS 像这样。
<style>
.embed {
overflow: hidden;
padding-top: 56.25%;
position: relative;
}
.embed iframe {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
</style>
为了最终的结果:
.embed {
overflow: hidden;
padding-top: 56.25%;
position: relative;
}
.embed iframe {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello!</title>
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css">
<!-- import the webpage's javascript file -->
</head>
<body>
<div class="embed">
<iframe src="https://www.youtube.com/embed/4VIy9lF_EHg" allowfullscreen></iframe>
</div>
</body>
<script src="/script.js"></script>
<script src="https://button.glitch.me/button.js" defer></script>
</html>