Question

I have a div full of text, photos, etc. It is generated dynamically, and usually around 10:1 ratio height:width.

I want to create a replica of this div on the same page, but making it 1/8 of the width.

EDIT: All of the contents should also be at 1/8 scale.

This thin tall overview div doesn’t need to be able to be interacted with, just accurately show the contents of the other larger div.

Any Ideas how I would/should do this?

Thanks!

Answer 1

Just an idea, you may try out the -webkit-transform and other such css styles on a jQuery .clone() of your larger div. Like,

$('#theDiv').clone().css('-webkit-transform', 'scale(.125, .125)');

Not sure if that would work, but its an idea 🙂

Edit I know this might not work on all browsers out there, but it will save you the trouble of resizing all the child elements, I believe.