1
votes

Comment utiliser la transformation CSS: scale (); adapter la div enfant à la div parent de manière réactive?

Je suis vraiment coincé. Mon div contient des div de taille fixe, du texte et des images avec beaucoup de positionnement basé sur les pixels. Comment puis-je simplement l'envelopper dans un autre div et le mettre à l'échelle pour l'adapter à l'enveloppe?

Cela peut être très similaire: https: // css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/

reactjs html css scale

0 commentaires

3 Réponses :

1
votes

scale () est relative à la taille du conteneur actuel. la hauteur et la largeur sont relatives à la taille du conteneur parent. Dans ce cas, je définirais simplement la hauteur et la largeur à 100% pour remplir l'élément DOM parent. Si vous devez utiliser une échelle, essayez à 100%. Après avoir défini la hauteur et la largeur.

0 commentaires

1
votes

Disons que certains éléments ont une classe de .scaled-wrapper , et que de tels éléments ont un seul enfant nommé .scaled-content . Ensuite, nous avons une fonction applyScaling qui prend un seul élément .scaled-wrapper et met à l'échelle son enfant en conséquence:

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

.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;
}

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

L'idée principale est de prendre le rapport de la taille entre parent / enfant et de l'utiliser pour redimensionner l'enfant en conséquence. Notez qu'il est important que transform-origin de l'enfant soit le coin supérieur gauche (avoir transform-origin: 50% 50% fait que l'enfant est centré autour du haut du parent -coin gauche).

Notez également que applyScaling doit être appelé si la taille du parent change un jour (par exemple, si le parent est une taille en pourcentage de la fenêtre, et la fenêtre se redimensionne).

0 commentaires

1
votes

Utilisation de l'extrait de @ Gershom, mais en conservant les proportions

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

.wrapper-wrapper {
  box-sizing: border-box;
  border: solid 2px blue;
  position: relative;
}
.scaled-wrapper {
  position: relative;
  width: 100px; height: 100px;
  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;
}

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;
  let scaleAmtX = Math.min(ww / cw, wh / ch);
  let scaleAmtY = scaleAmtX;
  
  
  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 = '100';
document.body.appendChild(wInp);

let hInp = document.createElement('input');
hInp.setAttribute('placeholder', 'input parent height in px');
hInp.addEventListener('input', change);
hInp.value = '100';
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);

1 commentaires

Cela semble fonctionner, je devrais le convertir pour réagir au code. Merci