Tengo un tweet incrustado. Los encuentro demasiado grandes, así que estoy tratando de reducirlos.
Aplico una transformación de escala del 50% en el div del tweet y funciona bien.
El problema es que el div principal sigue siendo el doble de grande de lo que ahora es necesario.
Ajuste de altura: 50% suena como una solución sencilla pero no funciona. Solo los números absolutos lo obligan a encogerse.
Debido a la naturaleza de los tweets incrustados, no puedo saber la altura del elemento de antemano y no puedo interceptarlos cuando se cargan (toma un tiempo, por lo que el tamaño del div cambia varias veces hasta que se cargan todos los elementos)
¿Cómo puedo forzar que el tamaño de un elemento sea del 50%?
Aquí hay un ejemplo de lo que estoy tratando de arreglar:
<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>y 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; }¿Ha intentado establecer el ancho deseado para la división de su contenedor y establecer el ancho del div interno al 100%?
El fragmento a continuación tiene un contenedor div (borde negro y relleno de 5 px) con un tamaño de 200 px de ancho (la altura se establece solo porque no tengo contenido para estirarlo). Dentro está el div de contenido donde iría el marcado de tu tweet (el color de fondo es amarillo), tiene un tamaño del 100 % del ancho para estar limitado por el contenedor. Nuevamente, la altura se cuidará sola cuando se agregue su contenido, está configurado al 100% para que pueda verlo.
Disculpa si entiendo mal tu problema.
.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>Si elige y solo se le permite usar css transform:scale , la respuesta es no (me refiero a que no hay una solución simple y directa porque scale css es solo un efecto visual y no cambia realmente la altura y el ancho del elemento.
Tenga en cuenta que no siempre es una buena práctica dar escala al elemento secundario solo, ya que debe tener en cuenta el problema del espacio.
vea el código js que puse, el ancho y el alto no cambian, por lo que el alto/ancho real para .tweet_embed sigue siendo el mismo antes de escalar.
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 es width / height / font-size (margen, relleno y más, pero si no afecta la visualización, no es necesario especificarlo). .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>