Html 使用百分比在div中拟合iframe内容

因此，我尝试缩放iframe的内容以适应div的宽度和高度。div wrap在另一个div中的宽度为60%，宽度为100%，如下所示

我想让iframe占60%，里面100%。所有div的所有高度均为100%。有人能帮帮我吗！？我正在使用 缩放每个浏览器的css属性

         <div class="iframe-wrap">
               <iframe class="iframe" frameborder="0"></iframe>
         </div>   

谢谢

编辑：

.iframe {
    display: block;
    width: 100%;
}

下面是一个例子，使用谷歌地图。您可以添加/删除/调整父div的宽度和高度（

.iframe wrapper

），但不要对

.iframe wrapper iframe

进行任何更改

.iframe wrapper{height:0；padding bottom:30%；}

为父div提供一个随页面缩放的响应高度。如果您喜欢固定高度，只需确保移除

填充底部

。您还可以删除底部填充物，并将高度设置为“自动”，具体取决于您尝试执行的操作

.iframe包装器{
位置：相对位置；
宽度：60%；
身高：0；
垫底：30%；
}
.iframe包装器iframe{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}

编辑：

下面是一个例子，使用谷歌地图。您可以添加/删除/调整父div的宽度和高度（

.iframe wrapper

），但不要对

.iframe wrapper iframe

进行任何更改

.iframe wrapper{height:0；padding bottom:30%；}

为父div提供一个随页面缩放的响应高度。如果您喜欢固定高度，只需确保移除

填充底部

。您还可以删除底部填充物，并将高度设置为“自动”，具体取决于您尝试执行的操作

.iframe包装器{
位置：相对位置；
宽度：60%；
身高：0；
垫底：30%；
}
.iframe包装器iframe{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}

谢谢，但该贴图不会随着iframe的大小而缩小；地图两侧的控件（放大/缩小，“登录”）会相应地自我调整。地图视图本身不会收缩，因为谷歌地图的设计目的是保持相同的缩放级别，而不管屏幕大小。也许一个不同的iframe示例，比如视频，更合适。我通过混合一些%和transform scale css值来解决它，我不确定它是否完全准确。我相信我们正在讨论这个解决方案的不同方面。我需要将iframe中的内容发送到skrink。“地图”解决方案不会这样做，它只是相应地定位地图。我的目标是得到一个规模效应（完整的网页，链接等），就像一个图像被skrinked。仍然感谢您的帮助。谢谢，但该贴图不会随着iframe的大小而缩小。它会缩小；地图两侧的控件（放大/缩小，“登录”）会相应地自我调整。地图视图本身不会收缩，因为谷歌地图的设计目的是保持相同的缩放级别，而不管屏幕大小。也许一个不同的iframe示例，比如视频，更合适。我通过混合一些%和transform scale css值来解决它，我不确定它是否完全准确。我相信我们正在讨论这个解决方案的不同方面。我需要将iframe中的内容发送到skrink。“地图”解决方案不会这样做，它只是相应地定位地图。我的目标是得到一个规模效应（完整的网页，链接等），就像一个图像被skrinked。还是要谢谢你的帮助。

.iframe {
    display: block;
    width: 100%;
}