css - 如何使用 CSS 变换 : scale(); to fit child div to parent div responsively in react?

Question

我真的被困住了。我的 div 包含固定大小的 div、文本和具有大量基于像素定位的图像。我怎样才能将它们包装在另一个 div 中并使它们缩放以适合包装器？

这可能非常相似:https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/

Answer 1

假设某些元素有一个 .scaled-wrapper 类，并且这些元素有一个名为 .scaled-content 的子元素。然后我们有一个函数 applyScaling，它接受单个 .scaled-wrapper 元素，并相应地缩放其子元素:

let scaledWrapper = document.getElementsByClassName('scaled-wrapper')[0];

let applyScaling = scaledWrapper => {
  
  // Get the scaled content, and reset its scaling for an instant
  let scaledContent = scaledWrapper.getElementsByClassName('scaled-content')[0];
  scaledContent.style.transform = 'scale(1, 1)';
  
  let { width: cw, height: ch } = scaledContent.getBoundingClientRect();
  let { width: ww, height: wh } = scaledWrapper.getBoundingClientRect();
  
  let scaleAmtX = ww / cw;
  let scaleAmtY = wh / ch;
  
  scaledContent.style.transform = `scale(${scaleAmtX}, ${scaleAmtY})`;
        
};

applyScaling(scaledWrapper);

// ---- The rest of the code is just for the demonstration ui ----
let change = () => {
  let w = parseInt(wInp.value);
  let h = parseInt(hInp.value);
  if (!isNaN(w)) scaledWrapper.style.width = `${w}px`;
  if (!isNaN(h)) scaledWrapper.style.height = `${h}px`;
  scaledWrapper.getElementsByClassName('scaled-content')[0].innerHTML = textInp.value;
  applyScaling(scaledWrapper);
};

let wInp = document.createElement('input');
wInp.setAttribute('placeholder', 'input parent width in px');
wInp.addEventListener('input', change);
wInp.value = '200';
document.body.appendChild(wInp);

let hInp = document.createElement('input');
hInp.setAttribute('placeholder', 'input parent height in px');
hInp.addEventListener('input', change);
hInp.value = '200';
document.body.appendChild(hInp);

let textInp = document.createElement('input');
textInp.setAttribute('placeholder', 'input text content');
textInp.addEventListener('input', change);
textInp.value = 'abc';
document.body.appendChild(textInp);

.scaled-wrapper {
  position: absolute;
  left: 10px; top: 30px;
  width: 200px; height: 200px;
  outline: 1px solid red;
  z-index: 1;
}
.scaled-content {
  box-sizing: border-box;
  display: inline-block;
  transform-origin: 0 0;
  background-color: #ffd0d0;
  z-index: -1;
}

<div class="scaled-wrapper"><div class="scaled-content">abc</div></div>

主要思想是获取父/子之间的大小比例，并使用它来相应地缩放子级。请注意， child 的 transform-origin 位于左上角很重要(具有 transform-origin: 50% 50% 会导致 child 以 parent 的顶部为中心-左 Angular )。

另请注意，如果父级的大小发生变化(例如，如果父级是窗口的百分比大小，并且窗口调整大小)，则需要调用 applyScaling。