0

introducir la descripción de la imagen aquí

Lo que ustedes están mirando aquí es un perfil de usuario, lo que yo quiero es que la foto de perfil este hasta la mitad dentro de la foto de portada, tengo rato intentado hacerlo pero nada me funciona.

He creado dos clases, una para la foto de portada llamada img-responsive y la otra la para foto de perfil llamada img-profile

El proyecto lo estoy desarrollando con el framework de diseño Materializecss

Código html5:

<!-- Content -->
        <section class="container z-depth-1 white">
            <article class="row col s12 section">

                <div class="row">
                    <div class="col s12">

                        <img src="images/paisaje.jpg" alt="Foto de portada" class="col s12 materialboxed img-responsive" height="300" />

                        <!-- <div class="col s3 m4 xl4"></div> -->
                        <img src="images/yo.jpg" alt="Nombre del usuario" class="col s6 m3 xl3 center-align img-responsive circle img-profile" height="190">

                    </div>
                </div>

            </article>
        </section>

Código css3:

/* Foto adaptable */
.img-responsive {
  object-fit: cover;
}

/* Reglas para posicionar foto de perfil arriba de portada */

.img-profile {
  
}

Aun no llevo nada en CSS, espero me puedan ayudar.

Se que este foro no es para este tipo de cosas, mas bien es para solucionar errores de programación y este no es un error de programación, les ruego que me perdonen pero es que me urge un poco solucionar este problema.

1

1 respuesta 1

1

Tienes que poner ambas imágenes en una envoltura y luego posicionar absolutamente la imagen de perfil en relación con la envoltura.

Algo así:

.img-responsive {
  object-fit: cover;
}

.header {
  position: relative;
}

.img-portada {
  width: 100%;
}

.img-profile {
  position: absolute;
  left: 20px;
  bottom: -100px;
  border-radius: 50%;
  height: 200px;
  width: 200px;
}
<section class="container z-depth-1 white">
  <article class="row col s12 section">

    <div class="row">
      <div class="col s12 header">

        <img src="https://via.placeholder.com/800x300/9c27b0/ffffff/?text=Cover" alt="Foto de portada" class="col s12 materialboxed img-responsive img-portada" height="300" />

        <!-- <div class="col s3 m4 xl4"></div> -->
        <img src="https://via.placeholder.com/200/333333/ffffff/?text=Profile" alt="Nombre del usuario" class="col s6 m3 xl3 center-align img-responsive circle img-profile" height="190">

      </div>
    </div>

  </article>
</section>

3
  • He copiado tu código exacto, pero no me ha funcionando, sigue igual Commented el 26 ene. 2021 a las 22:25
  • Mi respuesta era sólo un ejemplo de cómo se podía hacer, antes de que tuvieras tu código en la pregunta. He editado la respuesta, adaptándola a tu código. Por favor, compruébalo.
    – dfvc
    Commented el 26 ene. 2021 a las 22:36
  • Te pido una enorme disculpa, me funciono el primer ejemplo, solo que no me daba cuenta porque estaba llamando la clase antigua y no las nuevas en las imágenes ya que los nombres de las clases eran diferente. Tu primer ejemplo me funciono a la perfección Commented el 26 ene. 2021 a las 23:08

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.