Comment supprimer les espaces blancs autour des éléments CSS mis à l'échelle ?

Résolution des espaces blancs autour des éléments CSS mis à l'échelle

Lors de l'application d'une transformation d'échelle à un élément CSS, un espace blanc peut apparaître autour du élément mis à l’échelle. En effet, la mise à l'échelle affecte la taille rendue de l'élément, mais pas sa taille physique, laissant l'espace environnant vide.

Comprendre le problème

Les transformations CSS, telles que l'échelle , déplacez le contenu rendu de l'élément, y compris son arrière-plan et ses éléments enfants, comme une unité tout en laissant les éléments environnants dans leur position d'origine. Il en résulte un espace vide autour de l'élément mis à l'échelle.

Solution

Pour supprimer l'espace blanc, vous devez ajuster la taille rendue de l'élément pour qu'elle corresponde à sa taille mise à l'échelle. Ceci peut être réalisé en utilisant des propriétés CSS telles que la largeur et la hauteur. Voici comment procéder :

Solution CSS :

<code class="css">.quarter.scale-thumb {
  width: 60%; // Adjusted width to match scaled size
  height: 60%; // Adjusted height to match scaled size
  -webkit-transform: scale(0.2);
  -moz-transform: scale(0.2);
  -o-transform: scale(0.2);
  transform: scale(0.2);
}</code>

Solution JavaScript :
Vous pouvez également utiliser JavaScript pour ajustez manuellement la taille de l'élément après avoir appliqué la transformation :

<code class="javascript">document.querySelector('.quarter.scale-thumb').style.width = '60%';
document.querySelector('.quarter.scale-thumb').style.height = '60%';</code>

En ajustant la largeur et la hauteur de l'élément mis à l'échelle, vous pouvez éliminer l'espace blanc supplémentaire et vous assurer que le contenu mis à l'échelle s'adapte parfaitement à l'espace prévu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!