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;
}
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>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>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>