¿Cómo puedo hacer responsive un texto en absolute dentro de un contenedor?

publicado por: Anonymous

mi pregunta parece algo simple en verdad y tal vez lo es…
pero ya he buscado en muchos sitios y no tengo muy claro como puedo hacer esto.
Explico: tengo un div en bootstrap en relative en el cual tengo una imagen, y un texto en posicion absolute (esta en absolute porque quiero que el texto este encima de mi imagen y escale segun el div), mi pregunta es como puedo hacer que el texto escale de manera continua en tdas las pantallas responsive esto es lo que pasa:
-ESTO ES EN UNA PANTALLA NORMALDE PC
introducir la descripción de la imagen aquí

-ESTO ES UN MOVIL
introducir la descripción de la imagen aquí

Como pueden ver el text se mueve y no calza con la imagen del contenedor,
mis soluciones fueron 1, comenzar a trabajar con media query para darle un top y un left a cada texto con absolute, pero es muy trabajoso, y en algunos casos tengo no solo 1 texto sino hasta 5 o mas los cuales tengo que mover en cada dispositivo movil y no es para nada optimo. algo como esto para cada pantalla:

@media (max-width: 1024px)
.carnivoro{
    left: 29% !important;
}

, como ven estoy trabajando con % y tambien he intentado trabajar con vw y vh pero no sirvió, quisiera saber si alguien tiene una solución mas optima para este problema ya sea con css y html o usando javascript me sería de mucha ayuda, bueno gracias de antemano. este es el codigo de mi contenedor y sus estilos:

HTML

<div class="container-fluid imgcont3">
    <div class="row">
        <div class="col-sm-12 contImgGen">
            <p class="carnivoro animal1">Carnívoros</p>
            <img src="img/1.1.png" alt="" class="img-fluid img1View imgView1-1">
        </div>
    </div>
</div>

CSS

.contImgGen
{
  position: relative;
}

.carnivoro
{
  position: absolute;
  top: 3%;
  left: 29%;
}

solución

Al final gracias a parte del código de Edgar, descubrí fluid typography que utiliza css cal() para operar matemáticamente sobre cada pixel y reducir el texto según la pantalla, sin tener que crear un media query para cada una funciona algo así:

body {
  font-size: calc([tamaño minimo] + ([tamaño maximo] - [tamaño minimo]) * ((100vw - [tamaño minimo de pantalla]) / ([tamaño maximo de pantalla] - [tamaño minimo de pantalla])));
} 

y lo otro era lo del top y left no concordando con mi contenedor, lo que hice fue crear otro contenedor wrapper padre con posicion relativa, y este si mantenía la relación en aspecto que era lo que quería. Gracias

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *