Famo.us 适合父母尺寸答案

【问题标题】：Famo.us fit parent sizeFamo.us 适合父母尺寸
【发布时间】：2015-05-16 06:39:35
【问题描述】：

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

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

最小代码示例：

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

【问题讨论】：

你有代码示例吗？
@HP。我添加了一个代码示例，我的直觉告诉我我们应该使用 ContextualView 来获取父级的大小，然后相应地调整表面的大小。
你试过window.innerWidth和window.innerHeight来计算吗？假设父大小是窗口。否则，使用 Modifier 定义 known 父级大小，并在其中为子级定义另一个 Modifier。

标签： famo.us

【解决方案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）

【讨论】：

嘿，大卫！这看起来要简单得多，但不能解决纵横比大于图像的窗口。永远不会有高度是约束而宽度变化的点。
此时有两种选择：（1）如果图像失真没问题，添加minHeight : 100% CSS 属性。这将拉伸图像以填充高度。 (2) 当纵横比从 > 1 翻转到
如果您知道纵横比（问题中的纵横比仅为 2:1），我的作品就可以工作。我想情况并非总是如此！
是的，您的方法有效，但前提是您可以访问父尺寸。然而，在某些情况下，情况并非总是如此。通常，父视图可以访问其子视图，但子视图很少需要了解其父视图。

【解决方案2】：

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

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

【讨论】：

【解决方案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);

【讨论】：

好吧，让我们把它作为目前最好的解决方案，也许“有一天”会有一个专门的对象来完成这个任务。