famo.us - Famo.us 适合父母尺寸

Question

不为表面提供任何尺寸将使表面采用其父级的尺寸，对于我们称之为“填充”的图像。

但这会扭曲图像，现在如何制作一个表面（或任何具有大小的元素）以适应它的父级高度或宽度并保持元素比例？

最小代码示例：

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) truesize 中有值的意思是“使用 DOM 计算出来的值”
• (2) undefinedsize 中的值意味着“使用我父母的值”
• (3) 拥有 CSSwidth : 100%将允许 DOM 根据图像的默认纵横比随着宽度的变化而缩放高度。

放在一起意味着：

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

Answer 2

本文介绍了 ImageSurface 和 BkImageSurface 的 sizing-modes：

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

Answer 3

您可以在 Modifier 上使用 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);