0

.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.introducir la descripción de la imagen aquí

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>

5
  • No hay suficiente código para un ejemplo mínimo verificable, incluso el ejemplo solo es una caja vacia.
    – Excorpion
    el 4 nov. 2021 a las 17:50
  • Buenos días. Una disculpa aun no entiendo muy bien como funciona el foro, pero ya actualicé el código. La problemática es que mi esfera se mueve cuando dimensiono mi navegador, y lo que quiero conseguir es que quede fijo como lo tiene facebook. gracias por tu respuesta. el 4 nov. 2021 a las 18:23
  • Cual es la posicion que quieres darle al circulo entonces ?? centro ?
    – Excorpion
    el 4 nov. 2021 a las 18:34
  • Si, mira, quiero que quede en el centro, pero que cuando jale el navegador el circulo se quede siempre en el centro ya lo intenté colocando la esfera con position fixed y no me ha dado resultado nada compañero. el 4 nov. 2021 a las 18:36
  • Si usted ejecuta el código y hace la ventana mas pequeña el circulo pierde la posición o sea que se jala para donde se dimensiona el navegador y es lo que que quiero conseguir que quede fijo en el medio. el 4 nov. 2021 a las 18:39

1 respuesta 1

0

He editado el codigo, para no tener un div con image, pero si backgrounds, los cuales poder modificar.

Por lo que logro entender, esto se aproxima a lo que buscas hacer.

Puedes verlo a pantalla completa para comprobar.

.portada {
  border: 1px solid #e4e6eb;
  height: 300px;
  border-radius: 7px;
  position: relative;
  background-image: url("https://loremflickr.com/1280/720/hawk");
  background-size: auto auto;
  background-repeat: no-repeat;
  background-position: center center;
  text-align: -webkit-center;
  min-height: 300px;
  max-height: 300px;
}

.img-perfil {
  background-image: url("https://loremflickr.com/320/240/eagle");
  background-position: center center;
  border: 3px solid darkblue;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin-top: 50px;
}
<div class="portada">
  <div class="img-perfil">
  </div>
</div>

4
  • pensé en hacerlo así con un background sería más comodo, pero si ya le meto php para que cache la imagen y la muestre. ¿podria yo meter una salida de php como ruta en una url? por ejemplo mis salidas son archivos php para que muestre la foto en el div. no sé si me explique jaja el 4 nov. 2021 a las 19:00
  • Desde php, se lo metes al style del div por ejemplo.
    – Excorpion
    el 4 nov. 2021 a las 19:03
  • ah perfecto. Entonces, lo intentaré así de esa manera, una pregunta no quiero ser malagradecido o algo parecido por falta de información de como se usa el foro pero no se como ayudarte por tu ayuda, de mi parte yo te doy las gracias por tu tiempo y la información que me brindaste, veo que hacen puntuaciones pero no sé como puntuarte el 4 nov. 2021 a las 19:07
  • Si te falta información, te recomiendo leer recorrido de bienvenida y Cómo preguntar. Para votar y puntuar, estan las flechas upvote y downvote, ademas de aceptar la respuesta.
    – Excorpion
    el 4 nov. 2021 a las 19:08

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.