1

Requerimiento

Crear un div responsive, es decir que cambie el tamaño del contenido pero la ubicación sea exactamente la misma, en mi caso, que cambie el tamaño del autobús y al mismo tiempo el de las cabezas, manteniendo la ubicación.

En este caso las cabezas cambian de tamaño pero el autobus no.

¿Es posible? , estoy utilizando bootstrap 3.

(Al margen de la pregunta principal) Es posible agregar el DNI sobre cada cabeza y que sea Responsive?

Código

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css');

.parent {
  position: relative;
  top: 0;
  left: 0;
  width: 90%;
}
.bus {
  position: relative;
  top: 0px;
  left: 0px;
  width:100%;
}
.human1 {
  position: absolute;
  top: 42%;
  left: 364px;
  width:4%;
}

.human2 {
  position: absolute;
  top: 42%;
  left: 458px;
  width:4%;
}

.human3 {
  position: absolute;
  top: 42%;
  left: 264px;
  width:4%;
}

.human4{
  position: absolute;
  top: 42%;
  left: 164px;
  width:4%;
}
<div class="parent">

  <img class="bus" src="https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX10405102.jpg" />
  <img class="human1" src="https://www.shareicon.net/data/128x128/2015/11/04/666985_man_512x512.png" />
  
    <img class="human2" src="https://www.shareicon.net/data/128x128/2015/11/04/666985_man_512x512.png" />
      <img class="human3" src="https://www.shareicon.net/data/128x128/2015/11/04/666985_man_512x512.png" />
        <img class="human4" src="https://www.shareicon.net/data/128x128/2015/11/04/666985_man_512x512.png" />
        
  
  
  
</div>

3
  • probaste con la clase .cols en los divs? el 1 mar. 2018 a las 13:21
  • No me sirve, la posición tiene que ser absoluta, las cabezas tienen que estar justo en esa ubicación
    – nawelittle
    el 1 mar. 2018 a las 13:24
  • Tu primer gran error es que tu estilo del autobús se aplica a la clase "bus", pero tu imagen de autobus tiene la clase "BUS". Cambia ésta última a minúsculas y tu bus cambiará de tamaño. El otro fallo, pero supongo que estás en ello, es que la posición de las cabezas está en píxeles y no en porcentaje.
    – delCano
    el 1 mar. 2018 a las 14:09

1 respuesta 1

1

Hola todo se puede jejeje, pero bootstrap no fue diseñado para ello, toca con css y su lógica de maquetación de toda la vida, pero vamos por pasos.

  1. Todas las medidas tienen que estar en porcentajes para que todo sea funcional.
  2. Te aconsejo que todas las cabezas, tengan una clase común, para no estar repitiendo el código en cada una.
  3. El bus no es responsive, no porque los estilos que le pusistes esten mal, sino porque tu clase BUS esta en mayuscula y en el css, en minúscula .bus

Lo otro ya es opcional:

  1. Recomiendo usar archivos .svg para que no se pixelen las imágenes.
  2. Agrupa las imágenes (img) en etiquetas figure, es una buena práctica.

Para lo del DNI es lo mismo que con las cabezas, pero depende de tu diseño, mira como te lo propongo:

  • Agrega un span con el contenido del DNI y con la misma clase humanX de la imagen que vas asociar y agregale otra clase en común como por ejemplo: dni.

  • En el css, lo acomodas a la altura que necesites y con un tipo de letra y tamaño que necesites, para hacerlas responsive te recomiendo usar medidas vmin o vmax, %o calc.

  • Usa display:inline-block en los span, para que pueda aceptar otros atributos que necesitas, por ejemplo transform o width.

  • Como el espacio en tamaños pequeños no alcanza si el número es grande, te recomiendo rotarlo verticalmente, de esa manera es legible hasta cierto punto.

  • Si usas la misma clase humanX de la imagen que vas asociar, este número automáticamente se pondrá en la misma posición.

Mira un ejemplo con tu código:

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css');

.parent {
  position: relative;
  top: 0;
  left: 0;
  width: 90%;
}
.bus {
  position: relative;
  top: 0px;
  left: 0px;
  width:100%;
}
.cabeza{
  position: absolute; 
  width:4%; 
  top: 37.5%;
}

.human1 { left: 23%; }

.human2 { left: 29%; }

.human3 { left: 35%; }

.human4 { left: 67%; }

.dni{
 position: absolute;
 display: inline-block;
 background: lightgray;
 top: 30%;
 font-size: calc(0.5em + 10%);
 transform-origin: 0 0;
 transform: rotateZ(-90deg);
}
<div class="parent">

  <img class="bus" src="https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX10405102.jpg" />
  <img class="cabeza human1" src="https://www.shareicon.net/data/128x128/2015/11/04/666985_man_512x512.png" />
  
    <img class="cabeza human2" src="https://www.shareicon.net/data/128x128/2015/11/04/666985_man_512x512.png" />
    <span class="dni human2">1516546514</span>
      <img class="cabeza human3" src="https://www.shareicon.net/data/128x128/2015/11/04/666985_man_512x512.png" />
    <span class="dni human3">4578714</span>
        <img class="cabeza human4" src="https://www.shareicon.net/data/128x128/2015/11/04/666985_man_512x512.png" />
        
  
  
  
</div>

¿Por qué te mencionaba lo del figure? porque puedes aprovechar esta estructura:

<figure class="cabeza humanX">
  <img class="cabeza" src="cabeza-svg">
  <figcaption="dni"> 1213545646 </figcaption>
</figure>

Y así poder alinear perfectamente cada DNI a cada cabeza, sin tener que preocuparte por su posición con respecto a todo el bus.

Sí te quedo alguna duda, déjame tu comentario. Éxitos!

@EdgarGutierrez @G3kdigital

1
  • Me sirvio! , muchas gracias.
    – nawelittle
    el 1 mar. 2018 a las 18:02

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.