4
respuestas

[Duda] Pregunta sobre modificar una imagen

por Ulises Aar�n Santill�n Figueroa
| 35.3k xp | 13 posts

Veran quiero poner una imagen en un proyecto pero no me deja modificarlo y cuando lo pongo se pone muy grande intente ajustarlo con pixeles pero no se modifica ¿que puedo hacer?, ademas de que tampoco me deja modificar el fondo `` Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

HTML

CSS .fondo-principal { background: linear-gradient(to right, #ff9966, #ff5e62); background-size: cover; background-position: center; height: 100vh; margin: 0; display: flex; justify-content: center; align-items: center; width: 800px; /* Ajusta el ancho de la imagen a 300 píxeles / height: auto; / Mantiene la proporción de aspecto original de la imagen */ }

4 respuestas
por Ulises Aar�n Santill�n Figueroa
| 35.3k xp | 13 posts

Este es mi codigo y no entiendo por que 

CSS
.fondo-principal {
    background: linear-gradient(to right, #ff9966, #ff5e62);
    background-size: cover;
    background-position: center;
    height: 100vh;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 800px; /* Ajusta el ancho de la imagen a 300 píxeles */
    height: auto; /* Mantiene la proporción de aspecto original de la imagen */
}

HTML
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Challenger Encriptado de Texto</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="app.js">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
</head>
<body class="fondo-principal">
    <div class="fondo">
        <div class="imagen-fondo">
            <img class="imagen" src="Imagenes/pexels-rotada-removebg.png" >
        </div>
    </div>
    <!-- Contenedor principal -->
    <div class="container">
        <!-- Texto o contenido de la página aquí -->
    </div>
</body>
</html>
por Ulises Aar�n Santill�n Figueroa
| 35.3k xp | 13 posts

Esta la imagen

por Bruno Botelho de Souza
| 3909.9k xp | 14853 posts
Alura Scuba Team Scuba Team | Front-end

¡Hola Ulises!

Para modificar el tamaño de la imagen, puedes utilizar CSS para definir el ancho y alto de la imagen. Por ejemplo, si quieres que la imagen tenga un ancho de 300 píxeles, puedes añadir la siguiente regla CSS:

.imagen {
    width: 300px; /* Puedes dejarlo 100% para se ajuste al tamaño del contenedor padre que en tu caso es el "fondo"*/
    height: auto;
}

Esto hará que la imagen tenga el ancho que definiste y se ajustará automáticamente la altura para mantener la proporción original.

¡Saludos!

Si este post te ayudó, por favor marca como solucionado ✓. ¡Continúa con tus estudios!
por Ulises Aar�n Santill�n Figueroa
| 35.3k xp | 13 posts

No entiendo bien, ¿que es el contenedor padre? ¿la parte principal de la pagina?