.portada{
border: 1px solid #e4e6eb;
height: 300px;
border-radius: 7px;
position: relative;
}
.img-portada{
width: 100%;
height: 200px;
object-fit: cover;
}
.img-perfil{
border: 1px solid #000000;
width: 150px;
height: 150px;
border-radius: 50%;
position: absolute;
bottom: -20px;
left: 300px;
}
<div class="portada">
<img src="../img/p.jpg" alt="">
<div class="img-perfil">
</div>
</div>
Necesito posicionar esa caja para hacer el clon de facebook y colocar la imagen de perfil. La verdad, sí la posiciono en su lugar, mi problema es que cuando estiro el navegador la div
se jala: el resultado que quiero es que la div
quede fija como facebook.
Y bueno, este sería el código que estoy utilizando
/*-------------------------PORTADA--------*/
.portada{
border: 1px solid #e4e6eb;
height: 300px;
border-radius: 7px;
position: relative;
}
.img-portada{
width: 100%;
height: 200px;
object-fit: cover;
}
.img-perfil{
border: 1px solid ;
width: 150px;
height: 150px;
border-radius: 50%;
position: absolute;
bottom: -20px;
left: 300px;
}
<div class="portada">
<img src="../img/p.jpg" alt="">
<div class="img-perfil">
</div>
</div>