54 lines
1.2 KiB
CSS
54 lines
1.2 KiB
CSS
#img_am {
|
|
/* width: 50%;
|
|
height: 350px; */
|
|
margin: 0 auto; /* Centrar el contenedor horizontalmente */
|
|
background-image: url("../source_imgs/about_me/img.gif");
|
|
background-repeat: no-repeat; /* Evita que la imagen se repita */
|
|
background-size: cover; /* Ajusta la imagen para que cubra el área del contenedor */
|
|
background-position: center; /* Centra la imagen dentro del contenedor */
|
|
display: block; /* Asegura que se comporte como un bloque */
|
|
}
|
|
|
|
|
|
/* media querys */
|
|
@media only screen and (max-width: 767px) {
|
|
/* Reglas CSS para pantallas de celulares */
|
|
/* red */
|
|
#img_am {
|
|
width: 100%;
|
|
height: 250px;
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width: 768px) and (max-width: 991px) {
|
|
/* Reglas CSS para tablets */
|
|
/* purple */
|
|
#img_am {
|
|
width: 80%;
|
|
height: 450px;
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width: 992px) and (max-width: 1199px) {
|
|
/* Reglas CSS para laptops */
|
|
/* green */
|
|
#img_am {
|
|
width: 50%;
|
|
height: 350px;
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width: 1200px) {
|
|
/* Reglas CSS para monitores ultra wide */
|
|
/* yellow */
|
|
#img_am {
|
|
width: 45%;
|
|
height: 350px;
|
|
}
|
|
#about_me {
|
|
width: 65%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
}
|