Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Ayuda con mi código, no puedo ajustar la foto

Buenas noches, yo si tengo una duda. Seguí los pasos que se mencionaron pero al actualizar la página mi foto utiliza casi todo el espacio de ella. Estoy tratando de arreglarlo, ya revisé el código de Ana Garcia el del ejemplo para ver que me falta pero no tiene más que el nombre de la imagen y el archivo. Yo lo agregué igual (el mio) pero sigo sin entender porque en mi página las medidas de mi foto se hicieron tan grandes.
Acá está mi código css

.presentacion__enlaces__subtitulo {
font-family: 'Krona One', sans-serif;
font-weight: 400;
font-size: 24px;
}

  • {
    padding: 10;
    margin:10;
    }

body{
height: 100vh;
box-sizing: border-box;
background-color: #000000;
color: #F6F6F6;
}

.titulo-destaque {
color: #22D4FD; ;
}

.presentacion {
margin: 10% 15%;
display: flex;
align-items: center;
justify-content: space-between;
}

.presentacion__contenido{
width: 615px;
display: flex;
flex-direction: column;
gap: 40px;
}

.presentacion__contenido__titulo{
font-size: 36px;
font-family: 'Krona One', sans-serif;
}

.presentacion__contenido__texto{
font-size: 24px;
font-family: 'Montserrat', sans-serif;
}

.presentacion__enlaces{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 32px;
}

.presentacion__enlaces_subtitulo{
font-family: 'Krona One' sans-serif;
font-size: 24px;
font-weight: 400;
}

.presentacion__enlaces__link{
border: 2px solid #22D4FD;
color: #F6F6F6;
width: 378px;
border-radius: 8px;
}

intenté agregando .imagen pero parece que no funciona así
.imagen {
width: 70%;
height: 75%;
}

y también intenté con el html

Lleva tu carrera tecnológica al siguiente nivel

¡Hola! Soy Fernanda Cortes, estudiante de Programación y Analista Jr. en Ciberseguridad. Con casi 10 años de experiencia en hotelería, actualmente me encuentro en transición al sector tecnológico combinando mis habilidades en atención al cliente con la programación y la ciberseguridad. Si tú también buscas llevar tu carrera al siguiente nivel, ¡contáctame!

<div class="presentacion__enlaces">
<h2 class="presentacion__enlaces__subtitulo">Accede a mis redes:</h2>
<a class="presentacion__enlaces__link" href="https://instagram.com/">Instagram</a>
<a class="presentacion__enlaces__link" href="https://github.com/">Github</a>
  agregando wel widht y height pero sigue sin funcionar
Foto de Fernanda width="250px" height="250px">

Me podrían ayudar, gracias. Aquí está mi página portafolio

1 respuesta

¡Hola! Con gusto te ayudo a resolver el problema con la imagen en tu página.

Por lo que veo en tu código y en la descripción, estás intentando ajustar el tamaño de la foto de tu portafolio, pero los estilos de width (ancho) y height (alto) no se aplican como esperas.

El problema principal suele ocurrir por la forma en que los navegadores calculan los porcentajes, especialmente para la altura.

¿Cuál es el problema?

Cuando usas un porcentaje para la altura (height: 75%), el navegador intenta calcular ese 75% basándose en la altura del contenedor padre (en tu caso, el div con la clase .presentacion__contenido). Sin embargo, si ese contenedor padre no tiene una altura específica definida (como por ejemplo height: 500px), el navegador no tiene una referencia para calcular el porcentaje y la regla a menudo no funciona.

Soluciones

Aquí tienes algunas soluciones, de la más sencilla a la más completa.

Solución 1 (La más recomendada y simple)

Define únicamente el ancho (width) y deja que el navegador ajuste la altura automáticamente. Esto mantiene la proporción original de la imagen y evita que se vea deformada.

Prueba a reemplazar tu código CSS por este:

.presentacion__contenido__imagen {
    width: 40%; /* Puedes ajustar este porcentaje según necesites */
}

Solución 2 (Usar un tamaño fijo en píxeles)

Si quieres un control más preciso y un tamaño exacto, usa píxeles (px) en lugar de porcentajes. Esta es una práctica muy común para imágenes de perfil. Además, puedes añadir border-radius para que la imagen sea circular, un estilo muy popular.

Prueba este código:

.presentacion__contenido__imagen {
    width: 280px;      /* Ancho deseado */
    height: 280px;     /* Alto deseado (igual al ancho para un círculo) */
    border-radius: 50%;/* Esto la hace completamente redonda */
    object-fit: cover; /* Asegura que la imagen llene el espacio sin deformarse */
}
  • object-fit: cover;: Esta propiedad es muy útil. Evita que la imagen se estire o se aplaste, recortándola para que encaje perfectamente en el círculo.

Resumen

  1. El problema: Usar height con porcentaje (%) es complicado si el contenedor padre no tiene una altura fija.
  2. La solución fácil: Define solo el width en tu CSS y elimina el height.
  3. La solución de estilo: Usa un ancho y alto fijos en píxeles (px) y considera agregar border-radius y object-fit para un mejor diseño.

Intenta con la primera solución, que suele ser la más efectiva para empezar.