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.