Масштабировать div без изменения размера и положения его дочерних элементов

Question

У меня есть div, который содержит некоторые элементы, такие как теги h и p.Как я могу масштабировать только оболочку div, а не внутренние элементы?

 <div class="wrapper" style="padding:50px; transform:scale(1.1)">
      <h2>title</h2>
      <p>description</p>
 </div>

Answer 1

Это немного хакерский способ сделать это - но он должен дать вам то, что вы ищете.Я включил нормальную версию и уменьшенную версию, чтобы показать разницу.

Эффективно масштаб дочерних элементов равен 1, деленному на масштаб элемента обертки (например, для преобразования: масштаб 1.1, например, дочерние элементы будут иметь масштаб 0,90909090909).

При этом ответ Такита лучше, так как вам не нужно вычислять обратную шкалу вручную.

.wrapper {
padding:50px;
background-color:#eeeeee;
}

.scaled {
transform:scale(1.2);
}

.scaled > * {
transform:scale(0.83333333333);
}

<div class="wrapper">
      <h2>title</h2>
      <p>description</p>
 </div>
 
 
 <div class="wrapper scaled">
      <h2>title</h2>
      <p>description</p>
 </div>

Answer 2

Пожалуйста, проверьте это: -

 :root{
 --scaleVar:2;
 }
.wrapper.scaled {
  padding: 0 20px;
  transform: scale(var(--scaleVar));
  background: #ddd;
}

.wrapper.scaled * {
  transform: scale(calc(1/var(--scaleVar)));
}sform:scale(0.83333333333);
}

<div class="wrapper">
      <h2>title</h2>
      <p>description</p>
 </div>
 
 
 <div class="wrapper scaled">
      <h2>title</h2>
      <p>description</p>
 </div>

Answer 3

Вы не можете предотвратить масштабирование дочерних элементов, если примените transform к своему wrapper.

⋅ ⋅ ⋅

Но вы можете использовать переменную CSS длясохраните свой масштабный коэффициент, а затем используйте calc для расчета (лучше, чем делать это вручную) и примените обратную шкалу для дочерних элементов:

.wrapper {
  padding: 0 20px;
  transform: scale(var(--scale));
  background: #ddd;
}

.wrapper > * {
  transform: scale(calc(1/var(--scale)));
}

<div class="wrapper" style="--scale: 1">
  <h2>title</h2>
  <p>description</p>
</div>

<div class="wrapper" style="--scale: 1.2">
  <h2>title</h2>
  <p>description</p>
</div>

<div class="wrapper" style="--scale: 0.8">
  <h2>title</h2>
  <p>description</p>
</div>

⋅ ⋅ ⋅

Другой способ сделать это - стилизовать и масштабировать вашу обертку как псевдоэлемент.Таким образом, внутри псевдоэлемента нет элемента, поэтому ничего не масштабируется:

.wrapper {
  position: relative;
  padding: 0 20px;
}

.wrapper::before {
  content: "";
  z-index: -1;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform: scale(var(--scale));
  background: #ddd;
}

<div class="wrapper" style="--scale: 1">
  <h2>title</h2>
  <p>description</p>
</div>

<div class="wrapper" style="--scale: 1.2">
  <h2>title</h2>
  <p>description</p>
</div>

<div class="wrapper" style="--scale: 0.8">
  <h2>title</h2>
  <p>description</p>
</div>