es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Altura de Flexbox y altura de la imagen de fondo

25 Jul, 2023 Programación

Soy principiante en html y CSS, y trataré de hacer un mapa con puntos clickeables, pero no lo consigo. Me han dado un consejo de usar flexboxes y crear un contenedor con el mapa como imagen de fondo, y crear contenedores separados que puedan contener botones de imagen para los puntos clickeables. La solución debe ser receptiva y funcionar tanto en escritorio como en móviles.

He comenzado intentando que la imagen de fondo y los puntos/cuadros se redimensionen igualmente y luego intentar configurar la posición de los puntos/cuadros, pero ya he encontrado un problema con la imagen de fondo y el contenedor principal.
No puedo establecer la altura del contenedor principal igual a la altura de la imagen de fondo, así que ahora solo se muestra la mitad de la imagen.
Si inserto la altura del contenedor principal igual a la imagen de fondo en píxeles, la imagen de fondo no se redimensionará de manera receptiva.

¿Alguien sabe cómo establecer la altura de la imagen de fondo y el contenedor al mismo tamaño, o tal vez conoce una mejor solución para esto?

En ese caso, estaré encantado de saber de ti 🙂

Mi código hasta ahora:

.map-container {
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-image: url("Images/home/map_front.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

.flexbox-point {
  width: 20%;
  margin: 20px;
  border: 3px solid #B90F12; /* Color para ver los puntos/cuadros */
}

.flexbox-point1 {
  min-height: 100px;
}

.flexbox-point2 {
  min-height: 100px;
}

.flexbox-point3 {
  min-height: 100px;
}

<!-- Prueba de flexbox con mapa como imagen de fondo -->
<div class="map-container">
  <div class="flexbox-point flexbox-point1"></div>
  <div class="flexbox-point flexbox-point2"></div>
  <div class="flexbox-point flexbox-point3"></div>
</div>
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución para un mapa con puntos clickeables usando HTML, CSS y Flexbox

    Como principiante en HTML y CSS, puede parecer desafiante crear un mapa con puntos clickeables. Sin embargo, con la ayuda de Flexbox, es posible crear un mapa responsive y funcional.

    Una solución es crear un contenedor con el mapa como imagen de fondo y luego crear contenedores separados para los puntos clickeables. Para lograr esto, sigue los siguientes pasos:

    1. Crea un contenedor padre con el mapa como imagen de fondo y establece display: flex para convertirlo en un contenedor Flexbox.

    2. Establece la propiedad flex en el contenedor padre como 1 para permitir que ocupe completamente su contenedor padre.

    3. Establece la propiedad background-size en la imagen de fondo como cover para asegurarte de que se redimensione correctamente.

    4. Crea contenedores separados para cada punto clickeable y establece un ancho fijo o porcentaje para satisfacer tus necesidades.

    5. Utiliza la propiedad background-color para establecer el color y una propiedad border opcional para crear un recuadro que contenga los puntos clickeables.

    6. Utiliza position: absolute para posicionar los contenedores separados en el mapa. Puedes hacer esto estableciendo las propiedades top y left.

    7. Para que la solución sea responsive, utiliza valores porcentuales para el ancho de los contenedores separados y establece max-width en el contenedor padre.

    Tu código debería verse algo como esto:

    <div class="map-container">
  <div class="flexbox-point flexbox-point1"></div>
  <div class="flexbox-point flexbox-point2"></div>
  <div class="flexbox-point flexbox-point3"></div>
</div>

<style>
  .map-container {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    background-image: url("ruta/a/la/imagen.jpg");
    background-size: cover;
    max-width: 100%; /* opcional */
  }

  .flexbox-point {
    width: 20%;
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid #B90F12; /* opcional */
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%); /* centra el recuadro horizontal y verticalmente */
  }

  .flexbox-point1 {
    top: 25%;
    left: 30%;
  }

  .flexbox-point2 {
    top: 75%;
    left: 70%;
  }

  .flexbox-point3 {
    top: 50%;
    left: 20%;
  }
</style>

    Puedes ajustar los porcentajes en las propiedades top y left de cada contenedor separado para posicionarlos donde desees en el mapa.

    Recuerda reemplazar ruta/a/la/imagen.jpg en la propiedad background-image con la ruta de tu propia imagen.

    Con estos pasos, deberías poder crear tu propio mapa clickeable con Flexbox. ¡Buena suerte!

Comments are closed.