Question

所以我试图缩放iframe的内容以适应div的宽度和高度。 div包装在另一个div中的宽度为60％，宽度为100％，未在下面显示。

我想让iframe占据内部100％的60％。所有div的所有高度均为100％。请有人帮帮我！？我正在使用缩放每个浏览器的css属性。

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

不确定，但有些css3是这样的吗？

        zoom: 0.75;
       -moz-transform: scale(0.75);
       -moz-transform-origin: 0 0;
       -o-transform: scale(0.75);
       -o-transform-origin: 0 0;
       -webkit-transform: scale(0.75);
       -webkit-transform-origin: 0 0;

谢谢！

Answer 1

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

Answer 2

修改： Codepen with video example

See Codepen

以下是一个使用Google地图的示例。您可以添加/删除/调整父div（.iframe-wrapper）的宽度和高度，但不要对.iframe-wrapper iframe进行任何更改。

.iframe-wrapper { height: 0; padding-bottom: 30%; }为您的父div提供与页面一致的响应高度。如果您喜欢固定的高度，请务必删除padding-bottom。你也可以删除填充底部并将高度设置为“自动”，＆＃39;取决于你想要做什么。

＆＃13;

.iframe-wrapper {
  position: relative;
  width: 60%;
  height: 0;
  padding-bottom: 30%;
}
.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

＆＃13;

<div class="iframe-wrapper">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d56157.911598837636!2d-81.57591711561635!3d28.393010043266493!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88dd7ee634caa5f7%3A0xa71e391fd01cf1a0!2sWalt+Disney+World+Resort!5e0!3m2!1sen!2sus!4v1433358634479" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>

＆＃13;

div中的iframe内容适合

2 个答案: