CSS: content scaling in parent div - html

Question

I'm using famo.us for rendering surfaces contaning HTML. I want the HTML content to scale with transformations on the surface. For example a "polaroid" rendering with picture and name:
HTML:
<div id="contentdiv" style="width:164px; height:199px; background-color: aqua; border: dashed">
<div class="polaroid">
<img class="img-responsive" src='https://dl.dropboxusercontent.com/u/7197720/www/Serge.jpg'>
<p>Serge</p>
</div>
</div>
CSS:
.polaroid {
position: relative;
width: 100%; /* width 144px, both sides 10px border */
}
.polaroid img {
max-width: 100%;
border: 10px solid #fff;
border-bottom: 2.4vw solid #fff;
-webkit-box-shadow: 3px 3px 3px #777;
-moz-box-shadow: 3px 3px 3px #777;
box-shadow: 3px 3px 3px #777;
}
.polaroid p {
position: absolute;
text-align: center;
width: 100%;
bottom: 0px;
font: 400 1vw 'Kaushan Script', cursive;
color: #888;
}
I just don't get the CSS in a shape that when I enlarge or minimize the div, the content scales with it. To test scaling within a div I created a simple test harness with the example I try to implement. See http://codepen.io/svdoever/pen/raGjrZ. Problem is the scaling/positiong of fonts and that borders should scale on resize, so smaller border on smaller size.
My first question is: is it possible to write html/css that scales correctly with the parent container? Should work for images, fonts, margins etc. Is there a solution for my example?
My second question is: is it possible to make the html/css responsive, so show less/more content based on the size of the container element.
My third question is: what are the best practices for writing this type of html/css.
EDIT: I found blogpost http://blog.sathomas.me/post/zooming-html-content-with-css-scale-transform, but don't really understand the approach yet...

Answer 1

There is a solution for what you have done in your codepin using Famo.us. I have created an example, but will not include all the features of your codepen, but it will give you a start for dynamic css in Famo.us
Answer to first question:
It is possible to write css that will scale proportionately in your event handlers.
Example jsBin of code below
var mainContext = Engine.createContext();
mainContext.setPerspective(1000);
var splash = new Surface({ content: 'Famo.us Application'});
mainContext.add(splash);
var proportion = 1;
var orig = 144;
var min = 100;
var max = 1440;
var widthLabel = new Surface({
content: 'Width',
size: [true, true]
});
var widthSlider = new InputSurface({
type: 'range',
value: orig,
attributes: {
min: min,
max: max
}
});
var heightLabel = new Surface({
content: 'Height',
size: [true, true]
});
var heightSlider = new InputSurface({
type: 'range',
value: orig,
attributes: {
min: min,
max: max
}
});
function _changeProportions() {
var value = widthSlider.getValue();
polaroidMod.setSize([value,value]);
proportion = value/orig ;
polaroidText.setOptions({properties: {fontSize: Math.round(proportion) + 'em'}});
image.setOptions({
properties: {
border: Math.round(proportion*10) + 'px solid #fff',
borderBottom: Math.round(proportion * 1.5) + 'em solid #fff',
boxShadow: Math.round(proportion*3) + 'px ' + Math.round(proportion*3) + 'px ' + Math.round(proportion*3) + 'px #777'
}
});
polaroidText.mod.setTransform(Transform.translate(0,-Math.round(proportion*15), 0.002));
}
widthSlider.on('input', function(e){
var slider = e.target;
heightSlider.setValue(slider.value);
_changeProportions(slider.value);
});
heightSlider.on('input', function(e){
var slider = e.target;
widthSlider.setValue(slider.value);
_changeProportions();
});
var widthNode = mainContext.add(new Modifier({
size: [200, 40],
transform: Transform.translate(0,20, 0.001)
}));
var heightNode = mainContext.add(new Modifier({
size: [200, 40],
transform: Transform.translate(210,20, 0.001)
}));
widthNode.add(widthLabel);
widthNode.add(widthSlider);
heightNode.add(heightLabel);
heightNode.add(heightSlider);
var polaroidMod = new Modifier({
size: [orig, orig],
transform: Transform.translate(10,70, 0.001),
proportions: [1, 1]
});
var polaroidNode = mainContext.add(polaroidMod);
var polaroid = new ContainerSurface({
size:[undefined, undefined]
});
var image = new ImageSurface({
size:[undefined, true],
content: 'https://dl.dropboxusercontent.com/u/7197720/www/Serge.jpg',
properties: {
maxWidth: '100%',
border: Math.round(proportion*10) + 'px solid #fff',
borderBottom: Math.round(proportion) + 'em solid #fff',
boxShadow: '3px 3px 3px #777'
}
});
polaroidNode.add(polaroid);
polaroid.add(image);
polaroidText = new Surface({
size: [true, true],
content: 'Serge',
properties: {
font: "400 "+ Math.round(proportion) +"em 'Kaushan Script', cursive",
color: '#888',
fontSize: Math.round(proportion) + 'em'
}
});
polaroidText.mod = new Modifier({
origin: [0.5, 0],
align: [0.5, 1],
transform: Transform.translate(0,-15, 0.002)
});
var textNode = polaroidNode.add(polaroidText.mod);
textNode.add(polaroidText);
Answer to second question:
Yes, you could make it responsive within your transition event handlers as in the example.
Answer to third question:
Best practice in my opinion is based on use case, but you can see that styling can be dynamic during transitions without using a style sheet file.