在 iFrame 中应用 CSS

我正在尝试将广告图像的宽度从像素更改为百分比。我正在使用 Google DoubleClick 或“DFP”。它会自动将您的广告图像放入 iframe 中，从而很难更改图像的实际尺寸。

因此，我将图像宽度从像素更改为百分比的方法是，我在图像广告周围制作了一个 div（即网页的 90%），然后将图像的宽度设置为 100%，以便当包装器宽度随浏览器宽度调整而变化，其中的图像将始终填满包装器。但我不知道如何使这一切正常工作，因为图像位于 iframe 内（愚蠢的 DFP！！！）

这是包装器的 CSS 代码：

#div-gpt-ad-1362958263281-0 {width:90%; border:1px solid black;}

然后是包装器中的 iframe：

iframe {width:100%;}

最后是我尝试了一些 CSS 选择器和不同 div 类的实际图像：

.img_ad, a#aw0, iframe>.img_ad, iframe>#google_image_div>.img_ad {width:100%; display:block; border:1px solid red !important;}

如果您在 Google Chrome 中检查广告图片上的元素，您会发现 CSS 未应用于该图片。我想做的就是将图像宽度更改为百分比......以及高度auto。真的应该这么难吗？由于图像位于 iframe 中，这是否可能？ DFP 广告管理系统会让我陷入失败吗？我只是不知道...但是，我该如何更改图片广告的代码？任何帮助都将非常感激伙计们！ :)

这是 jsFiddle：http://jsfiddle.net/EptwH/3/

我发现我可以使用同步加载，与 Google 吹捧的“智能 iframe”结合起来，我可以将链接从他们的 iframe 中剥离出来并将其放入我的 DOM 中。

请注意，我将 dfp 代码的相同 ID 传递给了 AdjustGoogleAd 方法。我弄乱了宽度/高度属性，因为我们位于响应式网站上。

<script type='text/javascript'>
    (function () {
        var useSSL = 'https:' == document.location.protocol;
        var src = (useSSL ? 'https:' : 'http:') +
        '//www.googletagservices.com/tag/js/gpt.js';
        document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
    })();
</script>
<script type='text/javascript'>
    googletag.defineSlot('{AD SLOT HERE}', [WIDTH, HEIGHT], 'dfp-div-id').addService(googletag.pubads());
    googletag.pubads().enableSyncRendering();
    googletag.pubads().enableSingleRequest();
    googletag.enableServices();

    $(function () {
        AdjustGoogleAd('dfp-div-id');
    });

    function AdjustGoogleAd(bannerId) {
       var banner = $('#' + bannerId);
       var contents = $('#' + bannerId + ' iframe').contents();

       contents.find('a').clone().attr('id', bannerId + '_a').appendTo('#' + bannerId);
       var newLink = $('#' + bannerId + '_a');
       newLink.siblings().remove();
       newLink.find(".img_ad").removeAttr('height').removeAttr('width');
    }

</script>

使用 HTML：

<div id='dfp-div-id'>
     <script type='text/javascript'>
         googletag.display('dfp-div-id');
     </script>
</div>