Remove space that has come after transforming

Question

I want to generate a pdf of the layout. There will a fixed size for a div eg. The width of the div 720px and I want to maintain it 720 on all the devices. Since the div will go outside the screen on mobile devices I used to transform(scale) to make it small size but there is space below the div. I want to remove that space. below is the code for your reference.

.Scale {
  background-color: #dddddd;
}

.blue { 
  background: blue; 
}

.red{ 
  background: red; 
}

.Scale div {
  width: 50px;
  height: 50px;
}

.Scale {
  transform: scale(0.5);
  transform-origin: top left;
}

.parent{
  border: 1px solid;
}

<div class="parent">
  <div class="Scale">
    <div class="red"></div>
    <div class="blue"></div>
  </div>
</div>

Answer 1

I am not 100% sure if thats what you are asking for but if you use ScaleX instead the space below is gone as you are only scaling on the X-axis.

Try the code below:

.Scale {
  background-color: #dddddd;
}

.blue { 
  background: blue; 
}

.red{ 
  background: red; 
}

.Scale div {
  width: 50px;
  height: 50px;
}

.Scale {
  transform: scaleX(0.5);
  transform-origin: top left;
}

.parent{
  border: 1px solid;
}

        <div class="parent">
            <div class="Scale">
              <div class="red"></div>
              <div class="blue"></div>
            </div>
          </div>
    

Answer 2

You are seeing a "space below the div" because your <div class="parent"> is not being scaled down, thus its 1px border will remain in the same position. At the same time you have scaled down the <div class="Scale"> and it is now smaller than the parent, whose border is visible.

To "remove" the white space below the scaled div, you should also scale the parent down by adding the class .Scale to it like so:

<div class="parent Scale">
  <div class="Scale">
    <div class="red"></div>
    <div class="blue"></div>
  </div>
</div>

Also for cleaner code, group the .Scaled class together in your css.

.Scale {
  background-color: #dddddd;
  transform: scale(0.5);
  transform-origin: top left;
}

.blue { 
  background: blue; 
}

.red{ 
  background: red; 
}

.Scale div {
  width: 50px;
  height: 50px;
}

.parent{
  border: 1px solid;
}

Hope it helps!

Answer 3

it's simple you have to calculate with height, If for some reason you turn it upside down! like here your current width: 500px; and height: 220px; you want to reverse it like width: 220px; height: 500px; then again you have to use margin-bottom: calc((0.6 - 1) * 500px); that's it.

#parent {
  display: inline-block;
  outline: 5px solid #337326;
}

#child {
  width: 500px;
  height: 220px;
  background: #555; 
  transform: scale(0.6);
  transform-origin: top center;
  margin-bottom: calc((0.6 - 1) * 220px);
}

<div id="parent">
  <div id="child"> </div>
</div>