Html CSS：父div中的内容缩放

我正在使用famo.us渲染包含HTML的曲面。我希望HTML内容能够随着表面上的转换而扩展。例如，带有图片和名称的“宝丽来”渲染：

HTML:

我只是没有得到CSS的形状，当我放大或最小化div时，内容会随之缩放。为了测试div中的伸缩性，我创建了一个简单的测试工具，并使用了我尝试实现的示例。看见问题是字体的缩放/定位，边框应该在调整大小时缩放，所以越小的边框越小

我的第一个问题是：是否可以编写与父容器正确伸缩的html/css？应该适用于图像、字体、边距等。我的例子有解决方案吗

我的第二个问题是：是否可以使html/css响应，从而根据容器元素的大小显示更少/更多的内容

我的第三个问题是：编写这种html/css的最佳实践是什么

---

编辑：我找到了blogpost，但还不太了解它的方法…

有一个解决方案可以解决您在使用codepin时所做的事情。我已经创建了一个示例，但不包括codepen的所有功能，但它将为您在Famo.us中使用动态css提供一个开始

对第一个问题的答复： 可以编写在事件处理程序中按比例缩放的css

var mainContext=Engine.createContext（）；
mainContext.setPerspective（1000）；
var splash=新表面（{content:'Famo.us Application'}）；
mainContext.add（splash）；
var比例=1；
var-orig=144；
var最小值=100；
var max=1440；
var widthLabel=新曲面({
内容：“宽度”，
大小：[对，对]
});
var widthSlider=新的InputSurface({
键入：“范围”，
值：orig，
属性：{
敏:敏,，
马克斯：马克斯
}
});
var heightLabel=新曲面({
内容：“高度”，
大小：[对，对]
});
var heightSlider=新的InputSurface({
键入：“范围”，
值：orig，
属性：{
敏:敏,，
马克斯：马克斯
}
});
函数{
var value=widthSlider.getValue（）；
polaroidMod.setSize（[value，value]）；
比例=值/原始值；
setOptions（{properties:{fontSize:Math.round（property）+'em'}）；
image.setOptions（{
特性：{
边框：数学圆（比例*10）+“px实心#fff”，
borderBottom:Math.round（比例*1.5）+“em solid#fff”，
boxShadow:Math.round（比例*3）+'px'+Math.round（比例*3）+'px'+Math.round（比例*3）+'px#777'
}
});
polariaidtext.mod.setTransform（Transform.translate（0，-Math.round（比例*15），0.002））；
}
宽度滑块.on（'input'，函数（e）{
var滑块=e.目标；
heightSlider.setValue（slider.value）；
_改变比例（滑块值）；
});
高度滑块打开（'input'，函数（e）{
var滑块=e.目标；
widthSlider.setValue（slider.value）；
_改变比例（）；
});
var widthNode=mainContext.add（新修饰符({
尺寸：[200,40]，
transform:transform.translate（0,20,0.001）
}));
var heightNode=mainContext.add（新修饰符({
尺寸：[200,40]，
transform:transform.translate（210,20,0.001）
}));
widthNode.add（widthLabel）；
widthNode.add（widthSlider）；
heightNode.add（heightLabel）；
添加（heightSlider）；
var PolariaidMod=新修改器({
大小：[原始，原始]，
transform:transform.translate（10,70,0.001），
比例：[1,1]
});
var polariaidnode=mainContext.add（polariaidmod）；
var宝丽来=新集装箱表面({
大小：[未定义，未定义]
});
var image=新的ImageSurface({
大小：[未定义，为真]，
内容:'https://dl.dropboxusercontent.com/u/7197720/www/Serge.jpg',
特性：{
maxWidth:“100%”，
边框：数学圆（比例*10）+“px实心#fff”，
borderBottom:Math.round（比例）+“em solid#fff”，
boxShadow：“3px 3px 3px#777”
}
});
添加（宝丽来）；
宝丽来。添加（图像）；
polaroidText=新曲面({
大小：[对，对]，
内容：“哔叽”，
特性：{
字体：“400”+数学四舍五入（比例）+“em'考山脚本”，草书”，
颜色：“#888”，
fontSize:Math.round（比例）+“em”
}
});
polariaidtext.mod=新修饰符({
来源：[0.5,0]，
对齐：[0.5,1]，
transform:transform.translate（0，-15,0.002）
}); 
var textNode=polariaidnode.add（polariaidtext.mod）；
textNode.add（polariaidtext）；

对第二个问题的答复： 是的，您可以在转换事件处理程序中使其响应，如示例所示

对第三个问题的答复：

---

我认为最佳实践是基于用例的，但您可以看到，在转换过程中，样式可以是动态的，而无需使用样式表文件。

谢谢您的回答。我希望有一个解决方案，可以处理html和css中的所有内容，这就是为什么我制作了这个测试工具。完全用“famo.us”代码编写，将很难在famo.us应用程序中快速生成新内容。你需要的是famo.us知识，而不仅仅是html/css知识。。。我现在会在我的代码中尝试你的方法，但我仍然希望只使用html/css解决方案。我知道你想要混合解决方案，但这会给你带来一些痛苦。尝试在famo.us之外使用css管理著名内容的转换将给您带来问题。祝你好运和快乐。

<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>

.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;
}