How to make canvas responsive

To change width is not that hard. Just remove the width attribute from the tag and add width: 100%; in the css for #canvas Changing height is a bit harder: you need javascript. I have used jQuery because i’m more comfortable with. you need to remove the height attribute from the canvas tag and add this script: You can see this fiddle: https://jsfiddle.net/1a11p3ng/3/ … Read more

Responsive iframe with max width and height

I have a fixed height container containing both images and iframes. To make the images responsive and preventing both vertical and horizontal overflow I can just set the following CSS: This ensures that a portrait image would not overflow vertically and a landscape image would not overflow horizontally. For iframes, I’m using the “padding-ratio” technique, … Read more

Maintain the aspect ratio of a div with CSS

Just create a wrapper <div> with a percentage value for padding-bottom, like this:  Run code snippetExpand snippet It will result in a <div> with height equal to 75% of the width of its container (a 4:3 aspect ratio). This relies on the fact that for padding : The percentage is calculated with respect to the width of the generated box’s containing block … Read more

Making an iframe responsive

I present to you The Incredible Singing Cat solution =) jsFiddle: http://jsfiddle.net/omarjuvera/8zkunqxy/2/As you move the window bar, you’ll see iframe to responsively resize Alternatively, you may also use the intrinsic ratio technique This is just an alternate option of the same solution above (tomato, tomato)