Question

我有一个背景（svg）图像，我最初会查看放大，然后在一个事件上图像将缩小以适合页面。这在Firefox中运行良好，但在Chrome中，图片在放大时被裁剪，因此当它应该适合页面时，它周围有白色空间。我相信这是Chrome优化程序的一部分：http://famo.us/guides/pitfalls

我的问题是，我可以针对此特定图片禁用此优化吗？或者还有其他解决方案吗？

修改：无需查看Chrome优化工具，使用更好的缩放方法解决（来自下面的正确答案）。

Answer 1

虽然我们不知道您的用例，但这里有一个使用比例的示例。

<强> Example jsBin (click on the image to resize)

  var mainContext = Engine.createContext();
  mainContext.setPerspective(1000);

  var mod = new StateModifier();

  var logo = new ImageSurface({
    content:  'http://code.famo.us/assets/famous_logo.svg',
    classes: ['double-sided']
  });
  logo._mod = new Modifier({
    size: [undefined, undefined],
    origin: [0.5, 0.5],
    align: [0.5, 0.5],
    transform: Transform.translate(0, 0, 0),
    proportions: [1.5, 1.5]
  });

  var mainMod = new Modifier({
    origin: [0.5, 0.5],
    align: [0.5, 0.5]
  });
  var rootnode = mainContext.add(mainMod);
  rootnode.add(logo._mod).add(logo);

  //logo._mod.setProportions([1.5, 1.5], {duration: 2000});

  logo.on('click', function(){
    if (!logo.small)
      logo._mod.setProportions([1,1], {duration: 1000});
    else
      logo._mod.setProportions([1.5, 1.5], {duration: 1000});

    logo.small = !logo.small;

  });

Chrome在famo.us中裁剪图像

1 个答案: