Becoming Responsive, Part 3: Scaling Elements

Wednesday, September 2nd, 2015

Becoming Responsive, Part 3: Scaling Elements

You’ve used media queries to soften up your previously rigid web design, and added some nifty mobile navigation for your smartphone-using customers. But you keep running into some elements that just won’t change size the way you need them to. What do you do now? Today we’ll finish up this brief series on responsive web design by discussing some techniques a developer can employ to scale page elements.


The most basic CSS to make an image element scalable is straightforward:

.textbox img { width: 100%; height: auto; }

With this code, every image within a container with the class “textbox” will automatically expand to the full width of its container and have its height set accordingly. For example, an image 500 pixels wide and 300 pixels tall, if placed within in an element 250 pixels wide, will shrink to 250px x 150px. If the container is 1000 pixels wide, the image will swell to 1000px x 600px.

If all you’re doing is fixing, say, a header image or hero graphic where the image completely fills its parent container, this might be good enough. But suppose you run into this situation:

<div class=”textbox” style=”width: 1000px; text-align: center;”>

<img src=”…” height=”60″ width=”60″ />


In this case, the container may be wider (possibly much wider) than the image, but the image probably shouldn’t scale any larger than it already is. Scaling down is fine if necessary, but getting too big would just make a big blurry mess.

The first solution is to add max-width to the CSS:

.textbox img { width: 100%; height: auto; max-width: 60px; }

This prevents the image from growing more than 60 pixels wide under any circumstances.

What if you have several images, all different widths? You could make several CSS rules, or you could use a quick CSS/jQuery combo to make them all self-limiting:


.textbox img { width: 100%; height: auto; visibility: hidden; }


var width;

$(‘.textbox img’).each(function(ix,it) {

width = $(it).attr(‘width’);

if (width) $(it).css({‘max-width’: width, ‘visibility’: ‘visible’});


The visibility rules help prevent a brief flash of the full-width image in some browsers. You might also notice that this solution depends on your img elements having their width (and preferably height) attributes set, which is good practice anyway.


Tables, long ago the king of web design, have fallen by the wayside in modern development. Yet tables still remain useful for displaying tabular data (I know, what a surprise). Unfortunately, tables, flexible as they are, can hit some pretty hard width limits on very narrow screens.

On the upside, you can actually break tables apart with CSS and stack their contents vertically:

@media (max-width: 800px) {

table th, table td { display: block; }


This can make for some very long pages, but this is usually preferable to a completely shattered, unprofessional-looking site.

Block Elements (iframe, canvas, etc.)

Resizing elements like this can get pretty tricky. Blocs like these don’t have a built-in aspect ratio the same way images do. Thus the old “width: 100%; height: auto;” trick doesn’t work, since the native height of any element is 0.

The best solution is to wrap the element inside a div:

<div class=”aspect”>

<iframe width=”1000″ height=”450″ src=”…”></iframe>


And add this CSS:

div.aspect { position: relative; width: 100%; height: 0; padding-bottom: 45%; }

iframe { width: 100%; position: absolute; width: 100%; height: 100%; left: 0; top: 0; }

And add this CSS:

div.aspect { position: relative; width: 100%; height: 0; padding-bottom: 45%; }

iframe { width: 100%; position: absolute; width: 100%; height: 100%; left: 0; top: 0; }

This sets the “aspect” div as the parent of the iframe, and gives it a height of 0. Since elements can flow out of containers that don’t have the “overflow: hidden;” CSS applied to them, this doesn’t prevent the iframe from displaying. The iframe is set as wide as its parent and moved to snug up to its top left corner.

But the real clever bit is the “padding-bottom” on the aspect div. While (for somewhat arcane reasons) you can’t set the height on most elements as a percentage of the width, you can do this for padding. So the parent div pushes everything below it down the page, to exactly the right height for the iframe to appear without overlapping anything else.

You’ll notice that the “45%” in the “aspect” div is the same aspect ratio as the original iframe. For elements with different sizing, just set this number to (height/width) * 100.

Summing it up

Making an existing website responsive is never easy. We at Matcha have spent a long time picking up the techniques we’ve discussed here, and several others besides, to help our customers improve their Google search rankings and prepare for the mobile future of the Web. Contact us today to find out how quickly and easily we can change your company’s Internet presence to something you will be proud of.

About Matcha Design

Matcha Design is a full-service creative B2B agency with decades of experience executing its client’s visions. The award-winning company specializes in web design, logo design, branding, marketing campaign, print, UX/UI, video production, commercial photography, advertising, and more. Matcha Design upholds the highest personal standards for excellence and can see things from a unique perspective due to its multicultural background.  The company consistently delivers custom, high-quality, innovative solutions to its clients using technical savvy and endless creativity. For more information, visit

Related Tags

You Might Also Like