{"id":235148,"date":"2015-11-24T07:09:20","date_gmt":"2015-11-24T14:09:20","guid":{"rendered":"http:\/\/css-tricks.com\/?p=235148"},"modified":"2017-05-04T08:55:34","modified_gmt":"2017-05-04T15:55:34","slug":"scaled-proportional-blocks-with-css-and-javascript","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/scaled-proportional-blocks-with-css-and-javascript\/","title":{"rendered":"Scaled\/Proportional Content with CSS and JavaScript"},"content":{"rendered":"

The web is a fluid place. Different sized screens, yadda yadda yadda. Fortunately for us, the web is ready for it. Text wraps. CSS gives us control over how to size things. What we don’t get (easily, anyway) is a way to scale whole element (and it’s children) proportionally—retaining its exact layout as it changes size.<\/p>\n

We can do it though.<\/p>\n

<\/p>\n

Proportional scaling of a *container* is fairly easy<\/h3>\n

Uncle Dave’s Ol’ Padded Box:<\/a><\/p>\n

.parent {\r\n  height: 0;\r\n  padding-bottom: 56.25%; \/* 16:9 *\/\r\n  position: relative;\r\n}<\/code><\/pre>\n
Then if you want content inside, you can absolutely position a covering container inside:<\/p>\n
.child {\r\n  position: absolute;\r\n  top: 0; left: 0;\r\n  width: 100%; height: 100%;\r\n}<\/code><\/pre>\n
This can be quite useful for things like images, containers that can independently scroll, or containers with so much spare room that it can handle dramatic changes in shape.<\/p>\n
If the content of this container was, say, an image<\/a>, it works great!<\/p>\n
<\/figure>\n
But things aren’t so happy if there are a bunch of HTML element children<\/a> just doing what regular ol HTML elements do.<\/p>\n
<\/figure>\n
Proportional scaling of everything<\/h3>\n
Let’s say this is the kind of thing we’re after:<\/p>\n
<\/figure>\n
CSS alone can’t really do this. But CSS is still the answer! transform: scale();<\/code> is what we need. It scales things perfectly proportionally. We just need to give it a number to scale it by, and that scale we can figure out with some JavaScript.<\/p>\n
The trick<\/a> is:<\/p>\n
var scale = Math.min( \r\n  availableWidth \/ contentWidth, \r\n  availableHeight \/ contentHeight \r\n);<\/code><\/pre>\n
Here’s one possible approach to that, using jQuery and jQuery UI Resizeable (because that’s easy and comfortable for me):<\/p>\n
See the Pen Resize with Scale<\/a> by Chris Coyier (@chriscoyier<\/a>) on CodePen<\/a>.<\/p>\n
Other ways…<\/h3>\n
SVG does this all by itself. Let’s cover this in an article really soon. I have some things to say<\/em>. ;)<\/p>\n
Also, you may be able to size everything with vw\/vh units maybe, but that sounds like a pain in the butt and a whole lot of magic numbers.<\/p>\n
It’s probably a bit rare that you’d need this<\/h3>\n
The reason I’m all into this idea is because I noticed that embeddeddable slide decks from Slides.com work like this. <\/p>\n
\n
@chriscoyier<\/a> Thanks! Content scales proportionally but the background size is flexible to fill 100% of avail space. pic.twitter.com\/1CybHUBdoS<\/a><\/p>\n
— Slides (@slides) November 18, 2015<\/a><\/p><\/blockquote>\n