1

I have a div that contains some elements like h and p tags. How can I scale just the wrapper div, not inner elements?

 <div class="wrapper" style="padding:50px; transform:scale(1.1)">
      <h2>title</h2>
      <p>description</p>
 </div>
Takit Isy
  • 9,688
  • 3
  • 23
  • 47
Mina
  • 183
  • 1
  • 2
  • 6
  • what do you mean by scale the wrapper? in case you want to increase the size of the wrapper you can just provide the width and height properties. – Vishwasa Navada K Dec 17 '18 at 09:00
  • What should the result look like? Everything inside the div should behave as if the div wasn't scaled at all? – Mr Lister Dec 17 '18 at 09:02
  • Possible duplicate of https://stackoverflow.com/questions/15544645/css3-scale-transform-on-parent-div-but-keeping-constant-size-in-some-of-the-asso#answer-15545867 – Rahul Dec 17 '18 at 09:12
  • @Rahul I think I'm gonna add my answer in that topic you linked… – Takit Isy Dec 17 '18 at 09:36

3 Answers3

4

You can't prevent the child elements to be scaled if you apply the transform on your wrapper.

⋅ ⋅ ⋅

But you can use a CSS variable to store your scale factor, and then use calc to calculate (better than doing it manually) and apply the inverse scale for the child elements:

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

⋅ ⋅ ⋅

Another way of doing it would be to style and scale your wrapper as a pseudo-element. That way, there is no element inside the pseudo-element, so nothing scales:

.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>
Takit Isy
  • 9,688
  • 3
  • 23
  • 47
  • 1
    important note: all child need to be at least inline-block as transform won't work with inline element .. I would probably consider a sub container to avoid this – Temani Afif Dec 17 '18 at 09:15
0

This is a bit of a hacky way of doing it - but it should give you what you're looking for. I've included a normal version and a scaled version to show the difference.

Effectively the scale of the child elements is 1 divided by the scale of the wrapper element (so for a transform:scale of 1.1 for example, the child elements would have a scale of 0.90909090909).

That being said, Takit's answer is better in that you don't have to calculate the inverse scale manually.

.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>
DKyleo
  • 806
  • 8
  • 11
0

Please check it:-

 :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>
Sarabjit Singh
  • 611
  • 7
  • 17