Question

我一直在我的reactJs应用程序中努力寻找和/或编写一个纯JavaScript（不是jQuery，不能使用该应用程序中的库），它将子div缩放到其父级的宽度。

我有一个包装器（父），最大宽度为1200px。它是子div，在100％缩放时为1400px。在DOM加载时，子div将溢出200px。观察子div需要缩放到父div，并随着窗口变小来更新它的缩放。

子div中的内容必须缩放，我不能简单地将其宽度设置为100％，因为它会与父元素一起调整大小。子元素将是网站的“预览”，该网站实际上将进行缩放（就像图像一样）。

I found this from CSS-Tricks，但是在将其重写为javascript（不是jQuery）后无法正常工作。

var $el = $("#very-specific-design");
var elHeight = $el.outerHeight();
var elWidth = $el.outerWidth();

var $wrapper = $("#scaleable-wrapper");

$wrapper.resizable({
  resize: doResize
});

function doResize(event, ui) {

  var scale, origin;

  scale = Math.min(
    ui.size.width / elWidth,    
    ui.size.height / elHeight
  );

  $el.css({
    transform: "translate(-50%, -50%) " + "scale(" + scale + ")"
  });

}

var starterData = { 
  size: {
    width: $wrapper.width(),
    height: $wrapper.height()
  }
}
doResize(null, starterData);

有帮助吗？

使用javascript将子级div转换为父级

0 个答案: