This content is likely not relevant anymore. Try searching or browse recent questions.
How to scale a banner proportionally? 0 Recommended Answers 1 Reply 0 Upvotes
1 Recommended Answer
$0 Recommended Answers
Last edited 7/10/19
Hello all, 

I've made a banner for my company to run on an external site. The ad is 330x300 and the main canvas and all it's elements need to keep the same aspect ratio as the size of the browser window changes. This seems impossible. I've tried using fixed and percentages, "tried match to viewport", "expandable", "fluid layouts" etc in all kinds of combinations, but all it does is move the objects around and mess up the proportions. Does anyone know how to fix this?

To be clear: i need the ad to scale proportionally and fill upp the entire width of the browser window.
All Replies (1)
Fixed aspect ratio (A/R) layouts are not supported directly but there are workarounds:
  1. Most common is to set every element to % values, and specify ad slots that are fixed aspect ratios.
  2. SVGs and other image elements will honor fixed aspect ratios, so if your entire ad were an image or layered images then it would be fixed A/R.
  3. There is a padding trick (e.g; width:100%; padding-bottom:50%;) to guarantee fixed aspect ratios of non-image elements but that only works for limited combinations of A/R & viewport sizes.
  4. Full A/R control of non-image elements requires a JavaScript solution and can be implemented quite simply with jQuery in GWD Code view although not supported directly by Google Web Designer so you won't see the results in stage preview during the authoring experience.
Hope that helps,

Google Web Designer team
marked this as an answer
This question is locked and replying has been disabled.
Discard post? You will lose what you have written so far.
Write a reply
10 characters required
Failed to attach file, click here to try again.
Discard post?
You will lose what you have written so far.
Personal information found

We found the following personal information in your message:

This information will be visible to anyone who visits or subscribes to notifications for this post. Are you sure you want to continue?

A problem occurred. Please try again.
Create Reply
Edit Reply
Delete post?
This will remove the reply from the Answers section.
Notifications are off
Your notifications are currently off and you won't receive subscription updates. To turn them on, go to Notifications preferences on your Profile page.
Report abuse
Google takes abuse of its services very seriously. We're committed to dealing with such abuse according to the laws in your country of residence. When you submit a report, we'll investigate it and take the appropriate action. We'll get back to you only if we require additional details or have more information to share.

Go to the Legal Help page to request content changes for legal reasons.

Reported post for abuse
Unable to send report.
This reply is no longer available.
You'll receive email notifications for new posts at
Unable to delete question.
Unable to update vote.
Unable to update subscription.
You have been unsubscribed
Unable to delete reply.
Removed from Answers
Marked as Recommended Answer
Removed recommendation
Unable to update reply.
Unable to update vote.
Thank you. Your response was recorded.
Unable to undo vote.
Thank you. This reply will now display in the answers section.
Link copied
Unable to lock
Unable to unlock
Unable to pin
Unable to unpin
Unable to mark
Reported as off topic