Make banner ads responsive

Question

Friends! I am working on adding banner ads to my website, the html that I have added to display banner is on https://jsfiddle.net/1r1kydjz/2/

        
                      

              相关标签:
       
      

Answer 1

If you know all possible size of your site you can define scale of the banner and then use transform:scale with Media Queries.

Answer 2

Updated fiddle - 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;
    }
}

try this - 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;
}

hope that helps!