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:
La segunda es cuando tiene más zoom:
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:
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/bootstrap@5.0.2/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/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>