Scale div and shrink its dom size

Question

I have an embedded tweet. I find them too big so I'm trying to scale them down.

I apply 50% scale transform on the tweet div itself and it works just fine.

The problem is, the parent div remains twice as large as it is now necessary.

Setting height: 50% sounds like an straightforward solution but it doesn't work. Only absolute numbers force it to shrink.

Due to nature of embeded tweets I cannot know the height of the element beforehand and I am unable to intercept when they are loaded (it takes a while so the size of the div changes several times until all elements are loaded)

How can I force the size of an element to be 50%?

Here's an example of what I'm trying to fix:

<div class="content">
  <div class="tweet_embed">
    <blockquote class="twitter-tweet"><a href="https://twitter.com/futureshift/status/1502708454791778307?ref_src=twsrc%5Etfw"></a></blockquote>
    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>  
  </div>
  <div>There's too much white space above this text</div>
</div>

and css:

.content {
  border: 1px solid black;
  height: 50%;
}

.tweet_embed {
  border: 1px solid black;
  font-size: 80px;
  transform: scale(0.5);
  transform-origin: 0 0;
}

https://codepen.io/noximo/pen/KKZKWZp

Answer 1

Have you tried setting desired width for your container division and setting the width of the inner div to 100%?

The snippet below has a container div (black border and 5px padding) sized to 200px width (height is set only because I don't have content to stretch it) . Inside is the content div where your tweet markup would go (background colour set yellow), it is sized to 100% width to constrained by the container. Again, height will take care of itself when your content is added, it's set to 100% so you can see it.

Aplologies if I misunderstand your problem.

.container {
  width: 200px;
  height: 150px;
  padding: 5px;
  border: 1px solid black;
}

.tweet {
  background: yellow;
  width: 100%;
  height: 100%;
}

<div class="container">
  <div class="tweet">
  tweet markup
  </div>
</div>

Answer 2

If you choose and only be allowed to use css transform:scale, the answer is no (I mean no simple and direct solution because css scale is only a visual effect and doesn't change the element height and width really.

Notice that it is always not a good practice to give scale to child element only since you have to be considered the space problem.

see the js code I put, it width and height doesn't change, so the actual height/width for .tweet_embed it still the same before is scaled.

console.log(window.innerHeight,window.innerWidth)
//Get width and height value for .tweet_embed 
console.log(window.getComputedStyle(document.querySelector('.tweet_embed')).getPropertyValue('width'))

console.log(window.getComputedStyle(document.querySelector('.tweet_embed')).getPropertyValue('height'))

.content {
  border: 1px solid black;
  height: 50%;
}

.tweet_embed {
  border: 1px solid black;
  font-size: 80px;
  transform: scale(0.5);
  transform-origin: 0 0;
}

<div class="content">
  <div class="tweet_embed">
    <div>Tweet - originally too big, scaled to 50%</div>
    <small>Variable height, loaded by external js.</small>
  </div>
  <div>There's too much white space above this text</div>
</div>

Another solution is to simulate a scale effect, the main three things transform:scale change is width/height/font-size (margin, padding and more, but if it doesn't effect the visualiztion, doesn't need to specify it.

.content {
  border: 1px solid black;
  height: 50%;
}

.tweet_embed {
  border: 1px solid black;
  font-size: calc(80px / 2);
 width:50%;
 height:50%;
}

<div class="content">
  <div class="tweet_embed">
    <div>Tweet - originally too big, scaled to 50%</div>
    <small>Variable height, loaded by external js.</small>
  </div>
  <div>There's too much white space above this text</div>
</div>