• Resuelto anzuans

    (@anzuans)


    Hola a todos! He creado una web donde tiene una foto principal que ocupa toda la pantalla. Al visualizarla con el móvil se come gran parte de la foto y solo se centra en el centro de la misma.

    He modificado esto con un css indicando que el el background-size sea contains.

    Hasta aquí bien, pero al hacerlo aparece un bloque enorme en blanco que no se como deshacerme de él. He leído algo del padding pero tampoco me esta dando ben resultado, podéis ayudarme?

    Gracias mil!

    La página con la que necesito ayuda: [accede para ver el enlace]

Viendo 2 respuestas - de la 1 a la 2 (de un total de 2)
  • Hola @anzuans!

    Se trata, precisamente, de cómo funciona la propiedad CSS que estás usando 😊. Al usar la imagen de fondo puedes fijar el tamaño, ponerlo en modo «cover» (siempre ocupará el alto y ancho del elemento HTML que lo contiene), y en modo «contain» (siempre entrará el 100% de la foto, independientemente del ancho/alto del elemento HTML que lo contiene).

    Si lo que quieres es hacer una cabecera que siempre entre la imagen y que no quede en blanco partes tienes dos enfoques:

    • Usar una imagen: Aquí no tienes problema, simplemente tendrás una imagen de un ancho/alto que tu decidas.
    • Usar un contenedor: Es lo que estás haciendo, pero deberás usar el elemento «cover» para que tu imagen siempre cubra este elemento y trabajar con las media-query para que el alto de tu contenedor se adapte en función de lo que no quieres «perder» de la imagen.
    • Usar JavaScript: Existe múltiples plugins e incluso librerías para adaptar el tamaño de una imagen y un contenedor. Aquí, por lo que intuyo de tu diseño, lo que no quieres es que se os corte a ti o a tu pareja, existen librerías para centrar el punto sobre el que se va a trabajar (en este caso quizá la cara de ambos) y luego en función del tamaño del contenedor, vuestras caras queden siempre en el centro o en un punto concreto. Esto ya me parece hacer un poco de sobre-ingeniería, pero es una posibilidad.

    Espero haber aclarado un poquito los conceptos. Cualquier duda aquí estamos y… ¡enhorabuena por el enlace!

    Iniciador del debate anzuans

    (@anzuans)

    Hola @diegofc,

    Muchas gracias por tu respuesta, la verdad que me has ayudado mucho en lo que necesitaba hacer. No había caído en modificar el contenedor. Finalmente lo arregle dejando el fondo como cover y ajustando la altura del contenedor, ahora tanto versión escritorio como versión móvil se visualiza como quiero.

    Muchas gracias por tu ayuda y por la felicitación 🙂

Viendo 2 respuestas - de la 1 a la 2 (de un total de 2)
  • Debes estar registrado para responder a este debate.