CSS：父div中的内容缩放

Question

我使用famo.us渲染表面包含HTML。我希望HTML内容可以在表面上进行转换。例如，＆＃34;宝丽来＆＃34;使用图片和名称进行渲染：

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

我只是没有获得一个形状的CSS，当我放大或最小化div时，内容会随之缩放。为了在div中测试缩放，我创建了一个简单的测试工具，并尝试实现。见http://codepen.io/svdoever/pen/raGjrZ。问题是字体的缩放/位置，并且边框应该在调整大小时缩放，因此在较小尺寸上缩小边框。

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

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

我的第三个问题是：编写此类html / css的最佳做法是什么。

编辑：我发现了博文http://blog.sathomas.me/post/zooming-html-content-with-css-scale-transform，但还没有真正理解这种方法......

Answer 1

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

回答第一个问题：

可以编写将在事件处理程序中按比例缩放的css。

<强> 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);

回答第二个问题：

是的，您可以在转换事件处理程序中使其响应，如示例中所示。

回答第三个问题：

我认为最佳做法是基于用例，但您可以看到样式在过渡期间可以是动态的，而无需使用样式表文件。