我有一个 iframe，它必须占用 60% 的宽度值，但高度可以是任何值。有什么方法可以“缩放”iframe 的内容以使其适合，然后我可以将高度设置为该缩放级别的高度？我不知道这是可能的，但我只能在这里找到涉及更改内容周围 iframe 大小的结果。因此，我们将不胜感激任何建议!
谢谢
最佳答案
css中有一个zoom属性，这里有例子What Does 'zoom' do in CSS?
您可以通过将新窗口大小与您设计的大小进行比较并按此方式缩放来确定缩放比例。如果您使用 jQuery，您可以检测到 iFrame 窗口的调整大小事件的变化(我认为)。
// Assuming you've designed your page for a 1024px width
var designWidth = 1024;
$(window).resize(function () {
var w = $(window).width();
/* calculate new zoom */
var zoom = parseInt(w / designWidth * 100).toString() + "%";
// Assuming all your content to resize is in an element with id "content"
$("#content").css("zoom", zoom);
});
一个肮脏的例子是这样的:
page1.html
<!DOCTYPE html>
<html>
<body>
<iframe width="50%" src="page2.html"></iframe>
</body>
</html>
page2.html
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript">
$(window).resize(function () {
resize();
});
$(document).ready(function(){
resize();
});
var designWidth = 300;
function resize() {
var w = $(window).width();
var zoom = parseInt(w / designWidth * 100).toString() + "%";
$("#content").css("zoom", zoom);
}
</script>
<div id="content">I get bigger and smaller!</div>
</body>
</html>
这适用于最新版本的 Chrome。
关于javascript - 如何根据 iframe 的大小调整 iframe 内容的大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20671617/