Famo.us适合父母大小

Question

不为表面提供任何尺寸会使表面占据其表面的大小，对于我们称之为＆＃34;填充＆＃34;的图像。

但这会影响图像，现在如何制作一个表面（或任何尺寸的元素）以适应它的父高或宽度，保持元素比例？

最小代码示例：

var Engine = require('famous/core/Engine');
    var Surface = require('famous/core/Surface');

    var mainContext = Engine.createContext();
    var firstSurface = new Surface({
        size: [200, 100],
        content: 'How to make this surface fit its parent (mainContext) keeping the 2/1 size ratio ?',
        properties: {
            backgroundColor: 'orange'
        }
    });

    mainContext.add(firstSurface);

Answer 1

以下代码将缩放图像的宽度，同时保留纵横比。不需要修饰符，只需要聪明的CSS。按高度换算是类似的。

var image = new ImageSurface({
    content : 'path/to/your/image/',
    size : [undefined, true],
    properties : {
        width : '100%'
    }
});

说明：

• （1）大小中true的值表示“使用DOM计算的值”
• （2）大小中undefined的值意味着“使用我父母的价值”
• （3）拥有CSS width : 100%将允许DOM根据图像的默认宽高比随着宽度的变化来缩放高度。

将它组合在一起意味着：

获取父级的宽度（2）→根据宽高比（3）缩放高度→使用DOM计算的高度作为我的实际高度（1）

Answer 2

本文介绍了ImageSurface和BkImageSurface的大小调整模式：

http://famousco.de/2014/07/depth-look-images-sizing-modes/

Answer 3

您可以在修改器上使用sizeFrom方法。 Modifier的“from”函数非常有用，因为您无需担心绑定到引擎调整大小事件。以下是您要实现的目标示例..

希望这有帮助！

var Engine   = require('famous/core/Engine');
var Surface  = require('famous/core/Surface');
var Modifier = require('famous/core/Modifier');

var mainContext = Engine.createContext();
var firstSurface = new Surface({
    size: [undefined, undefined],
    content: 'How to make this surface fit its parent (mainContext) keeping the 2/1 size ratio ?',
    properties: {
        backgroundColor: 'orange'
    }
});

firstSurface.mod = new Modifier({ origin: [0.5,0.5] });

firstSurface.mod.sizeFrom(function(){

    ratio         = (2.0/1.0) ;
    contextSize   = mainContext.getSize() ;
    contextRatio  = contextSize[0] / contextSize[1] ;

    width = ratio > contextRatio ? contextSize[0] : contextSize[1] * ratio ;
    height = width / ratio ;
    return [width,height] ;
});

mainContext.add(firstSurface.mod).add(firstSurface);