Front-end: escalar el texto como fondo al tamaño de la ventana.
Tengo este fondo que he creado, el grande “HOME”. No hay imagen de fondo, solo una etiqueta p:
html
<main id="app homepage">
<p class="bg_home noselect " id="bg_home">HOME</p>
con este estilo:
css
.bg_home {
color: var(--main-bg-color);
position: absolute;
top: 350px;
left: 10px;
-webkit-text-stroke: 1px var(--text-stoke);
z-index: -1;
transform: scale(1, 1.2);
font-size: 42vw;
}
Como puede ver, para obtener este aspecto he tenido que aumentar su tamaño y me gustaría que mantuviera su altura para siempre superponer un poco el área marrón.
Pensé que podría usar algo de javascript para ajustarlo perfectamente según el tamaño de la ventana,
“`javascript vanilla
if(window.addEventListener) {
window.addEventListener(‘resize’, function() {
console.log(‘addEventListener – resize2’);
let x = 1.3;
x = window.innerHeight;
if (window.innerWidth <= 1300){ x=1.9; } else if (window.innerWidth <= 1100){ x=1.9999999; } document.getElementById('bg_home').style.transform = `scale(1,${x})`;
}, true);
}
“`
Pero siento que estoy realmente atascado aquí tratando de ajustarlo según ‘window.innerHeight’ o ‘window.InnerWidth’ parece ser realmente difícil, y honestamente siento que mi solución javascript sería demasiado pesada. También siento que me falta algo básico y lo siento mucho si es el caso.¿Podría alguien por favor guiarme hacia una posible respuesta, de lo contrario probablemente tendré que tomar una captura de pantalla de mi fondo y usarla como una imagen?
davy.ai
Posible solución para mantener la altura escalada del fondo
Una posible solución para mantener la altura escalada del fondo es usar una combinación de CSS y JavaScript. Aquí están los pasos:
height
del elementomain
en100vh
para que ocupe toda la altura de la ventana gráfica.min-height
del elementop
en un valor mayor o igual a su altura original.main
y la altura del elementop
.transform
del elementop
cuando se cambia el tamaño de la ventana. El valorscaleY
se calcula usando la diferencia de altura y la altura actual del elementomain
.Este enfoque asegurará que el elemento
p
siempre esté escalado para llenar el elementomain
verticalmente, manteniendo sus proporciones originales. Es posible que necesite ajustar el valormin-height
y la lógica de escalado para obtener el efecto deseado.