Question

为什么这个横幅（在iFrame中）不会扩大到div的全部尺寸？

我的JSFIDDLE可以在这里找到，我的一些CSS如下：

 width: 300px;
 height: 222px;
 background-size: cover;

Answer 1

你可以这样做：

<div class="indexRightBanners">
    <iframe class="banner300x222Iframe" frameborder="0" scrolling="no"></iframe>
</div>

使用css：

.indexRightBanners {
  width: 300px;
  height: 222px;
  margin-bottom: 20px;
  background: black;
}

.banner300x222Iframe {
    background-image: url(http://img3.wikia.nocookie.net/__cb20141123145956/powerpuff/images/4/4e/IaCN7A0NfI4ig3cnoNGD2lADi06s4b2fB8S9nNEVKM4hpJv5qzy3Z3euZWr2Sw5Rj5QwKVMvdj-300x222.jpg);
    background-size:cover;
    width: 300px;
    height: 222px;
}

- ＆GT; http://jsfiddle.net/vhy82x6w/3/

您的代码问题在于您的图像只有Ap指出的200px宽。

Answer 2

您无法修改iFrame中的内容。包括造型。如果你的内容只是一张图片，你可以使用一个img标签，并将src属性设置为你的网址。

如果您需要html内容，可以尝试使用ajax和jquery将其加载到div中。如果网址与您的网页位于同一个域中，则您可以使用Jquery's $.get()，如果该网址位于外部域中，则可以使用This Cross Origin Solution。加载内容后，您可以在DOM中完全访问它以进行样式设置。

Answer 3

CSS可以尝试使用百分比来扩展内容。请尝试使用以下内容：

width: 100%;
height: 100%;
background-size: 100%;

有关CSS百分比属性的更多信息可以在此处找到（http://learnlayout.com/percent.html），也可以在此处找到（http://www.w3schools.com/cssref/pr_dim_width.asp）

显示全尺寸的横幅

3 个答案: