vvAve vvAve -3 years ago 93
CSS Question

Setting iframe height to percent value causes it to shrink

I am trying to make a responsive iframe, it kind of works for width by setting width=100%, but doing so for height causes this: http://imgur.com/6pZJUb7

Iframe is placed inside

<div class="w3-half w3-center">
, I am using w3 css.

Answer Source

I assume that you want to maintain some sort of aspect ratio in your iframe.

Percentages only work in heights if there is a definite height set of the parent element.

The viewport-height (vh) and viewport-width (vw) work very well for making responsive elements because they don't need any container heights to be set, but they can look very different depending on the display.

Something like this will give you a responsive 4:3 aspect ratio:

div.wrapper { width:40vw; height:30vw; }

Adjust the values to suit your needs.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download