Question

一整天都在试着让iframe的全长窗口缩小，因为broswer窗口会变小而不会失去它的宽高比。

这是我已经尝试过的。

<!DOCTYPE html>
<html>
<head>
<style>
html, body{
width: 100%;
height: 100%;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" ></script>
</head>
<body>
<div id="wrapper">
    <iframe src="http://www.mundaychevrolet.com" scrolling="no" style="width:100%; height: 100%; transform-scale" frameborder="0"></iframe>
</div>
</body>
</html>

Answer 1

制作iframe浏览器窗口的全长

http://jsfiddle.net/BfLZf/4/
http://jsfiddle.net/BfLZf/4/show

html,body {
    margin: 0;
    padding: 0;
    height: 100%;
}
body {
    overflow: auto;
}
iframe {
    overflow: auto;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

并在窗口变小时缩小

对于响应式图像（缩放...）http://www.456bereastreet.com/archive/201306/how_to_proportionally_scale_images_that_have_dimension_attributes/

http://bradfrostweb.com/blog/web/this-is-responsive/

Answer 2

由于div #wrapper没有设置高度，因此iframe采用默认大小。你的案例中的正确的CSS是：

<style>
html, body, #wrapper{
    width:100%; height:100%; margin:0; padding:0; overflow:hidden;
}
</style>


<iframe src="http://www.mundaychevrolet.com" style="width:100%; height: 100%; transform-scale" frameborder="0"></iframe>
<!-- remove scrolling="no" -->

使iframe成为浏览器窗口的全长，并在窗口变小时缩小

2 个答案: