Угловая шкала преобразования - удаление пробелов

Question

Я работаю над проектом, в котором мне нужно динамически уменьшать несколько больших таблиц.Я добиваюсь этого, используя transform: scale.Вот простая версия того, что я пытаюсь достичь в stackblitz.

StackBlitz - Масштабная демонстрация

Проблема заключается в том, что когда я уменьшаю масштаб, появляется пробел вниз.У меня есть текст и дополнительные таблицы после этого.Как убрать этот пробел?Я знаю, что об этом уже спрашивали, но я изо всех сил пытаюсь найти рабочее решение, особенно для угловых.

HTML

<h1>Transform</h1>
<button (click)="setScale1(1)">Original</button>
<button (click)="setScale1(0.5)">Scale 50%</button>
<button (click)="setScale1(0.25)">Scale 25%</button>

    <div style="transform-origin:0 0;" [style.transform]="'scale('+scale1+')'">
      <table style="width:130%;background-color:#D3D3D3;">
        <tr>
          <th>Firstname</th>
          <th>Lastname</th> 
          <th>Age</th>
          <th>Sex</th>
        </tr>
        <tr>
          <td>Jill</td>
          <td>Smith</td> 
          <td>50</td>
          <td>F</td>
        </tr>
        <tr>
          <td>Eve</td>
          <td>Jackson</td> 
          <td>94</td>
          <td>F</td>
        </tr>
        <tr>
          <td>Toby</td>
          <td>Smith</td> 
          <td>50</td>
          <td>M</td>
        </tr>
        <tr>
          <td>Tom</td>
          <td>Jackson</td> 
          <td>66</td>
          <td>M</td>
        </tr>
      </table>
    </div>
    <div>I would like this text to be directly after the blue container like when at 100% scale</div>
    <br>
    <button (click)="setScale2(1)">Original</button>
    <button (click)="setScale2(0.5)">Scale 50%</button>
    <button (click)="setScale2(0.25)">Scale 25%</button>
    <div style="transform-origin:0 0;" [style.transform]="'scale('+scale2+')'">
      <table style="width:130%;background-color:#D3D3D3;">
        <tr>
          <th>Company</th>
          <th>Type</th> 
          <th># Of Employees</th>
        </tr>
        <tr>
          <td>ABC Company</td>
          <td>Customer</td> 
          <td>50</td>
        </tr>
        <tr>
          <td>Other Company</td>
          <td>Customer</td> 
          <td>4</td>
        </tr>
        <tr>
          <td>Delta Force</td>
          <td>Supplier</td> 
          <td>100</td>
        </tr>
        <tr>
          <td>Alpha Rig</td>
          <td>Supplier</td> 
          <td>33</td>
        </tr>
      </table>
    </div>
    <div>I would like this text to be directly after the blue container like when at 100% scale</div>

JAVASCRIPT

import {Component} from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';
/**
 * @title Expansion panel as accordion
 */
@Component({
  selector: 'expansion-steps-example',
  templateUrl: 'expansion-steps-example.html',
  styleUrls: ['expansion-steps-example.css']
})
export class ExpansionStepsExample {
  scale1: string = '1';
  scale2: string = '1';


  setScale1(value: string): void {
    this.scale1 = value;
  }
  setScale2(value: string): void {
    this.scale2 = value;
  }
}

Answer 1

Использование предложенной Таллбоем статьи - это полное решение для всех, кто заинтересован.Предлагаемое решение:

Обновленный стек Рабочий раствор

1. Оберните таблицу в контейнер и динамически отрегулируйте высоту контейнера, когда масштабизменилось.

2. Я получаю высоту, назначая идентификатор для таблицы

3. Получите высоту через document.getElementById

4. Изменить высоту, кратную высоте контейнера (clientHeight), на коэффициент масштабирования

HTML

Преобразование

Исходная шкала 25% Шкала 50% Масштаб 150% Имя Фамилия Возраст Пол Джилл Смит 50 F Ив Джексон 94 F Тоби Смит 50 M Том Джексон 66 MI хотел бы, чтобы этот текст был сразу послетаблица, например, в масштабе 100%
Исходная шкала 25% Шкала 50% Тип компании Количество сотрудников Компания ABC Клиент 50 Другая компания Клиент 4 Delta Force Supplier 100 Поставщик Alpha Rig 33 Я хотел бы, чтобы этот текст был сразу после таблицынапример, в масштабе 100%

Javascript

import {Component} from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';
/**
 * @title Expansion panel as accordion
 */
@Component({
  selector: 'expansion-steps-example',
  templateUrl: 'expansion-steps-example.html',
  styleUrls: ['expansion-steps-example.css']
})
export class ExpansionStepsExample {
  scale1: string = '1';
  scale2: string = '1';

  height1: number;
  height2: number;


  setScale1(value: string): void {
    this.scale1 = value;
    this.setHeight('table1');   

  }
  setScale2(value: string): void {
    this.scale2 = value;
    this.setHeight('table2');   
  }
  setHeight(id: string): void {
      if (id === 'table1') {
        this.height1 = document.getElementById(id).clientHeight*parseFloat(this.scale1);
      }
      if (id === 'table2') {
        this.height2 = document.getElementById(id).clientHeight*parseFloat(this.scale2);
      }
  }
}

Answer 2

Вы можете использовать zoom: 0.3 вместо scale: 0.3, однако по-разному повлияет на браузеры и не будет работать в Firefox.

Другой обходной путь - эмулировать масштабированиес преобразованием (демо) .Объяснил здесь