Div y contenido Responsive

publicado por: Anonymous

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

_x000D_

_x000D_

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');_x000D_
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css');_x000D_
_x000D_
.parent {_x000D_
  position: relative;_x000D_
  top: 0;_x000D_
  left: 0;_x000D_
  width: 90%;_x000D_
}_x000D_
.bus {_x000D_
  position: relative;_x000D_
  top: 0px;_x000D_
  left: 0px;_x000D_
  width:100%;_x000D_
}_x000D_
.human1 {_x000D_
  position: absolute;_x000D_
  top: 42%;_x000D_
  left: 364px;_x000D_
  width:4%;_x000D_
}_x000D_
_x000D_
.human2 {_x000D_
  position: absolute;_x000D_
  top: 42%;_x000D_
  left: 458px;_x000D_
  width:4%;_x000D_
}_x000D_
_x000D_
.human3 {_x000D_
  position: absolute;_x000D_
  top: 42%;_x000D_
  left: 264px;_x000D_
  width:4%;_x000D_
}_x000D_
_x000D_
.human4{_x000D_
  position: absolute;_x000D_
  top: 42%;_x000D_
  left: 164px;_x000D_
  width:4%;_x000D_
}

_x000D_

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

_x000D_

_x000D_

_x000D_

solución

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:

_x000D_

_x000D_

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');_x000D_
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css');_x000D_
_x000D_
.parent {_x000D_
  position: relative;_x000D_
  top: 0;_x000D_
  left: 0;_x000D_
  width: 90%;_x000D_
}_x000D_
.bus {_x000D_
  position: relative;_x000D_
  top: 0px;_x000D_
  left: 0px;_x000D_
  width:100%;_x000D_
}_x000D_
.cabeza{_x000D_
  position: absolute; _x000D_
  width:4%; _x000D_
  top: 37.5%;_x000D_
}_x000D_
_x000D_
.human1 { left: 23%; }_x000D_
_x000D_
.human2 { left: 29%; }_x000D_
_x000D_
.human3 { left: 35%; }_x000D_
_x000D_
.human4 { left: 67%; }_x000D_
_x000D_
.dni{_x000D_
 position: absolute;_x000D_
 display: inline-block;_x000D_
 background: lightgray;_x000D_
 top: 30%;_x000D_
 font-size: calc(0.5em + 10%);_x000D_
 transform-origin: 0 0;_x000D_
 transform: rotateZ(-90deg);_x000D_
}

_x000D_

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

_x000D_

_x000D_

_x000D_

¿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

Respondido por: Anonymous

Leave a Reply

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