友!我正在努力向我的网站添加横幅广告,我添加到展示横幅的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 :(得分: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;
}
希望有所帮助!
答案 1 :(得分:0)
如果您知道网站的所有可能尺寸,则可以定义横幅的比例,然后将transform:scale
与媒体查询一起使用。