0

estoy haciendo mi primer portafolios Web personal (con html, css y Boostrap v5.0.2), en este portafolios yo tengo mi: foto Banner/Logo, mi foto de perfil y mi información personal, todo eso en un solo Div. El problema es el siguiente: Al probar como se vería la página con diferentes porcentajes de zoom en iternet, la imagen Banner se desacomoda, haciendo que se vea muy mal. Acá les dejo 3 imágenes, la primera es cuando tiene menos zoom: introducir la descripción de la imagen aquí

La segunda es cuando tiene más zoom: introducir la descripción de la imagen aquí

Lo que busco es que la foto Banner (de color verde y negro) sin importar el porcentaje de zoom que use siempre este acomodada de la siguiente forma: introducir la descripción de la imagen aquí

div.DataBasica {
/*Color del fondo de la seccion*/
background-color: white;
      
/*Que tan circulares son las puntas de la seccion*/
border-radius: 32px;

/*Margen de separacion de la isquierda y la derecha*/
margin: 25px 25px; 
    
/*Que tan centrado estan los objetos dentro de la seccion*/
padding: 20px;    

/*Configuraciones para el color del borde INCOMPLETA*/
border-color: green;
border-width: 1px;

}


#FotoBanner {
height: 200px;
width: 950px;
margin-left: -20px;
margin-right: -20px; 

margin-top: -19px;
border-top-left-radius: 32px;
border-top-right-radius: 32px;

}


#FotoPerfil {
height: 6rem;
width: 6rem; /* para que sea redondo, el width y height debe ser la misma medida */

height: 100px;
width: 100px;
margin-top: -55px;
margin-bottom: 8px;
border-radius: 50px; 

}

p.DataPersonal {
      padding-left: 20px;    
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

 <div class="DataBasica">

<img id="FotoBanner" src="Imagen1.jpg" alt="Foto representativa de mi Banner">
            
<img id="FotoPerfil" src="Imagen2.jpg" alt="Una simple foto de perfil">

<p class="DataPersonal">"Nombre"
<br>"Edad"
<br>"Titulo"
<br>"Ciudad", "Provincia" ("Pais")
</p>
            
</div>
        
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

3
  • Intenta usar imágenes hosteadas en algún sitio para que podamos ver tu ejemplo real... si ejecutas tu código no carga ninguna imagen y es complicado poder ayudarte de esta forma.
    – Benito-B
    el 14 oct. 2022 a las 17:51
  • Agrega todo el CSS y HTML, para poder replicarlo. el 14 oct. 2022 a las 18:11
  • Por favor, aclara tu problema específico o proporciona detalles adicionales para resaltar exactamente lo que necesitas. Tal como está escrito, es difícil saber exactamente qué estás preguntando.
    – Comunidad Bot
    el 14 oct. 2022 a las 18:37

2 respuestas 2

2

Lo que buscas es algo como esto, tal que el div se amolda al tamaño de su propio contenedor y la imagen hace lo propio con el div.

.imagen-escalada {
    width: 100%;
    height: 100%;
}

.DataBasica {
    width: 100%;
}
<div class="DataBasica">

<img class="imagen-escalada" id="FotoBanner" src="https://i.stack.imgur.com/varyG.png" alt="Foto representativa de mi Banner">
</div>

0

Para lograr una correcta presentación de portada y un perfil (tipo Facebook), es necesario tener en cuenta lo siguiente:

El contenedor padre DataBasica debe ser de posición relativo. Esto por que contiene un hijo que es de posición absoluto, que sobre sale de su lugar. Entonces, si su padre es relativo, siempre se queda dentro de su contenedor padre.

DataBasica siempre debe ser de un ancho completo, 100%, porque es una portada. La altura se puede modificar hasta adaptarse.

La imágen en DataBasica, la foto de portada, debe ser sí o sí de un ancho de 100%.

La foto de perfil es de posición absoluto. Y acomodamos donde queramos con left (primeramente si queremos a la derecha), bottom si queremos abajo.

Si queremos a la izquierda, cambiamos left por right.

Lee los comentarios en el código para entender mejor.

* {
    box-sizing: border-box
}

body {
    background-color: grey;
}

.DataBasica {
    background-color: white;
    border-radius: 32px;
    margin: 10px auto; /* auto es para acomodar al centro lateralmente */
    padding: 20px;
    border-color: green;
    border-width: 1px;
    max-height: 300px; /* cambiar hasta adaptar (puede ser 100%) */
    width: 100%;
    max-width: 980px;
    position: relative /* es importante porque tiene hijo absoluto */
}

#FotoBanner {
   display: block;
   width: 100%;
   height: 100%;
   objet-fit: cover /* importante para acomodar la imágen */
}

#FotoPerfil {
    height: 6rem;
    width: 6rem; /* para que sea redondo, el width y height debe ser la misma medida */
    
    /*width: 100%;
    margin-top: -19px;
    margin-left: -20px;  
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
    background-size: contain*/
    
    position: absolute; /* poner encima de todos */
    /*left: 1.3rem; /* a la derecha */
    bottom: 1.3rem; /* abajo */
    border-radius: 50%; /* aplica a los cuatros lados: 50% bien redondo */
    background-color: #000
}
 
<div class="DataBasica">
    
    <img id="FotoBanner" src="https://placeimg.com/700/300/people" alt="Foto representativa de mi Banner">
    <img id="FotoPerfil" src="Imagen2.jpg" alt="Una simple foto de perfil">

</div>

Esto solamente es un un ejemplo de cómo se puede diseñar una portada. En este código el diseño es totalmente responsivo, sin necesidad de usar @media

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.