Wie entferne ich Leerraum um skalierte CSS-Elemente?

Auflösen von Leerräumen um skalierte CSS-Elemente

Beim Anwenden einer Skalierungstransformation auf ein CSS-Element kann es dazu kommen, dass Leerräume um das herum erscheinen skaliertes Element. Dies liegt daran, dass sich die Skalierung auf die gerenderte Größe des Elements auswirkt, nicht jedoch auf seine physische Größe, sodass der umgebende Raum leer bleibt.

Das Problem verstehen

CSS-Transformationen, wie z. B. die Skalierung , verschieben Sie den gerenderten Inhalt des Elements, einschließlich seines Hintergrunds und seiner untergeordneten Elemente, als Einheit, während die umgebenden Elemente an ihren ursprünglichen Positionen belassen werden. Dies führt zu einem leeren Raum um das skalierte Element.

Lösung

Um den Leerraum zu entfernen, müssen Sie die gerenderte Größe des Elements an seine skalierte Größe anpassen. Dies kann mithilfe von CSS-Eigenschaften wie Breite und Höhe erreicht werden. So können Sie es machen:

CSS-Lösung:

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

JavaScript-Lösung:
Alternativ können Sie JavaScript verwenden Passen Sie die Größe des Elements manuell an, nachdem Sie die Transformation angewendet haben:

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

Durch Anpassen der Breite und Höhe des skalierten Elements können Sie den zusätzlichen Leerraum beseitigen und sicherstellen, dass der skalierte Inhalt genau in den vorgesehenen Raum passt.

Das obige ist der detaillierte Inhalt vonWie entferne ich Leerraum um skalierte CSS-Elemente?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!