2016-02-28 106 views
-1

朋友們!我的工作將橫幅廣告到我的網站,我已經加入到展示橫幅的HTML是https://jsfiddle.net/1r1kydjz/2/讓橫幅廣告響應

<div data-wrid="WRID-145664652759935473" data-widgettype="staticBanner" data-responsive="yes" data-class="affiliateAdsByFlipkart" height="90" width="728" style="text-align:center;"></div> 
<script async src="//affiliate.flipkart.com/affiliate/widgets/FKAffiliateWidgets.js"></script> 

,我面對的是,我的橫幅廣告不響應的問題,我希望他們能夠調整根據設備即手機,臺式機和平板電腦。

我試過寬度:100%和其他提到的東西,但它沒有幫助。

請注意,橫幅廣告位於動態創建的iframe中。

請讓我知道,如果有任何職位,我可以參考。

在此先感謝。

+0

而不是使用CSS(使用'width:100%'),有屬性'width'和'height';你有沒有試過改變這些? –

+0

是的,當我這樣做的橫幅對齊受到影響或橫幅根本不顯示。我在jsfiddle更新了我的橫幅廣告的css –

回答

1

更新小提琴 - https://jsfiddle.net/1r1kydjz/10/

* {margin:0; padding:0;} 

div[data-wrid^=WRID] { 
    margin: 0 auto; 
    max-width:100% !important; 
} 

div[data-wrid^=WRID] img { 
    max-width:100% !important; 
    margin:0 auto; 
} 

iframe { 
    max-width:730px !important; 
    text-align:center !important; 
    margin:0 auto; 
} 

@media (max-width:730px) { 
    iframe { 
     max-width:100% !important; 
    } 
} 



試試這個 - https://jsfiddle.net/1r1kydjz/5/

div[data-wrid^=WRID] { 
    margin: 0 auto; 
    width: 727px; 
    max-width:100% !important; 
} 

div[data-wrid^=WRID] img { 
    max-width:100% !important; 
} 

iframe { 
    max-width:100% !important; 
} 

希望幫助!

+0

它使廣告響應,但對齊受到影響。 –

+0

看到我的更新 - https://jsfiddle.net/1r1kydjz/10/ –

+0

我看到了,仍然沒有中央對齊。但我想這不是一個大問題,我會試着弄清楚。感謝解決方案使其響應。 –

0

如果您知道網站的所有可能的大小,則可以定義橫幅的比例,然後在媒體查詢中使用transform:scale