1

Tengo el siguiente diseño:

Invernadero

Tengo que añadirle una serie de iconos y label con datos. Es una pequeña interfaz gráfica de la domotica en un invernadero.

Tengo dos dudas de como hacerlo: He puesto la imagen del invernadero de background en una div con posicion relativa y dentro las div con los iconos y label con posicion absolute, el problema es el siguiente:

1º ¿Como puedo hacer que esta imagen del background se haga mas pequeña o grande dependiendo de la pantalla que visualice esto?

2º ¿Como puedo hacer que los iconos y label este siempre en una posición respecto a la imagen del bacground, aunque hagamos la pantalla mas pequeña o grande? Ahora mismo en mi monitor de 27 esta bien, pero al cambiarlo al de 13 se solapa todo.

Estoy usando Angular4, boostrap4, css.

.invernadero {
  background-image: url(/assets/img/greenhouse.png);
  background-color: white;
  background-repeat: no-repeat;
  background-position: center;
  height: 500px;
  width: 100%;
  position: relative;
}

.media {
  margin-top: 3%;
  margin-left: 35%;
  position: absolute;
}

.media2 {
  margin-top: 27%;
  margin-left: 38%;
  position: absolute;
}

.media3 {
  margin-top: 3%;
  margin-left: 57%;
  position: absolute;
}

.media4 {
  margin-top: 27%;
  margin-left: 52%;
  position: absolute;
}
<app-header></app-header>
<div class="invernadero">
  <div class="media">
    <img class="d-flex mr-3" src="assets/img/temp.png" alt="Generic placeholder image">
    <div class="media-body">
      <h4>55ºC</h4>
    </div>
  </div>

  <div class="media media2">
    <img class="d-flex mr-3" src="assets/img/temp.png" alt="Generic placeholder image">
    <div class="media-body">
      <h4>55ºC</h4>
    </div>
  </div>

  <div class="media media3">
    <img class="d-flex mr-3" src="assets/img/hum.png" alt="Generic placeholder image">
    <div class="media-body">
      <h4>55ºC</h4>
    </div>
  </div>

  <div class="media media4">
    <img class="d-flex mr-3" src="assets/img/hum.png" alt="Generic placeholder image">
    <div class="media-body">
      <h4>55ºC</h4>
    </div>
  </div>

</div>

1
  • para el 1 puedes mirar background-size w3schools.com/cssref/css3_pr_background-size.asp Tambien puedes ponerlo como imagen IMG y las capas de media utilizar z-index para el punto 2 yo utilizaria left, right, top, bottom en lugar de margin-left, margin-top .... Creo que tambien puedes utilizar para todo un gráfico svg y modificar por javascript cuando quieras que cambie, incluso propiedades por CSS Hay muchos ejemplos, busca animación SVG Por ejemplo maxwellito.github.io/vivus Commented el 14 oct. 2017 a las 10:37

1 respuesta 1

1

Respondiendo a tu primera pregunta, te paso una clase css para que la imagen de fondo se adapte al tamaño de la pantalla:

.imgContainer {
   position: absolute;
   top: 0px; left: 0px;
   width: 100%; height:100%;
   background-image: url('la_ruta_de_tu_imagen');
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}

Ahora, para la segunda pregunta, te sugiero que a los elementos que quieras que siempre mantengan una posición los pongas "absolute" con relación a su padre y la ubicación de estos elementos dentro del padre sea gestionado por la propiedad css llamada "margin". es decir, que un elemento tenga:

position: absolute;
margin-left: 5px;

Y con eso el elemento siempre estará 5 pixels a la izquierda, se haga grande o pequeño el padre.

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.