0

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%;
}
2
  • El código html y css que provees no es suficiente para solucionar tu duda y mucho menos, si no tenemos un ejemplo con una imagen real en cuestión, creo que puedo ayudarte, pero necesitaria que trates de ser más detallado con lo anterior y usar ctrl + m para colocar el código y emular lo más que puedas tu problema. De momento, respondeme lo siguiente: ¿Cuando dices escalar, es que quieres que el texto también crezca? ¿Cuando dices que sea más responsive, es que siempre se encuentre al centro de la imagen? y por último ¿También tienes problema con el top o solo con el left?** Commented el 26 ago. 2018 a las 16:44
  • Por cierto, la idea es tratar de solucionar tu problema mediante código sin tener que editar la imagen, pero ¿No sería más fácil, si las imágenes que tienes, no tengan el cuadro y contenedor (tipo polaroid), sino emular esa apariencia vía código? Esto permitiría que la imagen no importa que tanto escale, no afectará la parte blanca ni al texto y creeme para ti puede ser un dolor menos de cabeza. Puedes subir un ejemplo de imagen a imgur o si ya tienes un servidor sería lo mejor. Commented el 26 ago. 2018 a las 16:46

2 respuestas 2

1

Hay una forma de lograrlo con solo la imagen, pero sería bueno que dieras más detalles de tu pregunta para poder dar una solución más optima, por lo pronto te recomiendo una solución donde emules el "encuadre polaroid" vía código:

body{
 padding: 3em; /*esto puedes ignorarlo*/
}

.contImgGen
{
  position: relative;
  padding-top: 2em;
}

.contImgGen::before{
  content: '';
  display: block;
  position: absolute;
  width: 100%; 
  height: 100%;
  left: 0;
  top: 1.5em;
  z-index: 2;
  box-shadow: 
    inset 0 0 0 2em white,
    inset 0 4em 0 0 white;
  border: lightgray solid 4px
}

.carnivoro
{
  position: absolute;
  top: -10px;
  left: 50%;
  z-index: 2; 
  padding: .8em 2em;
  background: #f0973d;
  border-radius: 5px;
  border: solid #2a3f4c 3px;
  font-family: arial;
  text-transform: uppercase;
  color: white;
  transform: translateX(-50%);
  font-size: 1.2em;
  font-weight: bold;
}

.img1View{
  position: relative;
  z-index: 1;
  width: 100%;
}



/*===========================================
=============================================
=============================================
Esto tambien lo puedes ignorar, es para darle 
una apariencia más vintage-foto a la imagen
=============================================
=============================================
===========================================*/

.vintage-effect{
  margin-top: 3em;
}

.vintage-effect::after{
  content: '';
  display: block;
  width: 100%;
  height: calc(100% - 3em);
  top: 3em;
  left: 0;
  position: absolute;
  z-index: 1;
  background-image: url('https://i.pinimg.com/736x/cc/a8/ba/cca8bab4c320431703ff8593d8a90aca--polaroid-film-star-system.jpg'), url('https://78.media.tumblr.com/894638cc9491fd228f13969e810a1403/tumblr_inline_mmamxgdroh1qz4rgp.jpg');
  background-size: cover;
  mix-blend-mode: hard-light;
  background-blend-mode: screen;
  opacity: .5;
  transition: all ease .3s;
}

.vintage-effect:hover::after{
  opacity: 0;
}

figcaption{
  position: absolute;
  text-align: center;
  z-index: 3;
  width: 100%;
  top: calc(100% - 5px);
  left: 0;
}

@media (min-width: 760px){
  .vintage-effect{
    margin-top: 0em;
  }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid imgcont3">
  <div class="row">
    <div class="col-sm-12 col-md-4 contImgGen">
      <p class="carnivoro animal1">Carnívoros</p>
      <img src="http://picsum.photos/600/600?image=1074" alt="" class="img-fluid img1View imgView1-1">
      <figcaption>Foto normal</figcaption>
    </div>
    <div class="col-sm-12 col-md-4 contImgGen vintage-effect">
      <p class="carnivoro animal1">Carnívoros</p>
      <img src="http://picsum.photos/600/600?image=1074" alt="" class="img-fluid img1View imgView1-1">
      <figcaption>Foto con effecto vintage en CSS, posa el mouse sobre la imagen</figcaption>
    </div>
  </div>
</div>

@g3kdigital

1
  • Edgar gracias por tu comentario, si como dices faltan algunas cosas que no pude especificar pero respuesta me ayudo a encontrar una solución para mis problemas, sobre todo porque no tenía idea de la propiedad cal() gracias Commented el 29 ago. 2018 a las 19:46
0

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.