html - CSS:父div中的内容缩放

Question

我正在使用 famo.us 渲染包含 HTML 的表面。我希望 HTML 内容随着表面上的变换而缩放。例如带有图片和名称的“宝丽来”渲染:

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

对于您在 codepin 中使用 Famo.us 所做的事情，有一个解决方案.我已经创建了一个示例，但不会包括您的代码笔的所有功能，但它会让您开始使用 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);

第二个问题的答案:

是的，您可以像示例中那样在您的过渡事件处理程序中使其响应。

第三个问题的答案:

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