Ajustar imagen al tamaño del navegador

[Locura_23]

Buenas gente, estoy aprendiendo html y css, y al momento de hacer una imagen para el header (muy simple, con paint  ) me surge esta duda, es posible ajustar al tamaño del navegador la imagen del header? de manera que si reduzco o aumento el porcentaje de zoom el header se mantiene en forma ?

Código (html4strict) [Seleccionar] Expandir


<header>
<img src = "imagenes/header.png" alt = "logo unikami" />
<h1> Bienvenido a la página de Unikami Soft </h1>
<time> 2020-07-31 </time>
</header>


[3n31ch]

No entiendo mucho tu duda.
Pero si lo que quieres es que una imagen utilice el 100% de ancho, simplemente ponle ese valor en css.

Código (css) [Seleccionar] Expandir


* { /* Necesario para sobre escribir todos los elementos (estos tienen un valor por defecto que no nos interesa) */
box-sizing: border-box; /* Por defecto el ancho de los contenedores no considera el borde (solo su interior) esto dificulta los cálculos y te obliga a ocupar calc, mejor quitarlo y considerar el borde dentro del ancho y alto del elemento */
margin: 0; /* eliminamos todos los margenes externos por defecto */
padding: 0; /* eliminamos todos los margenes internos por defecto */
/* en resumen, el código de arriba es para dejar todo sin espaciado ni cosas raras por defecto */
}
img { /* seleccionamos todas las imagenes, acá puede poner la clase de tu imagen o la id, como te sea necesario */
width: 100%; /* indicamos que el ancho de la imagen ha de ser del 100% (osea todo el ancho disponible) Cabe señalar que si el contenedor padre no utiliza el 100% del ancho de la pagina o tiene un margen o padding el resultado no será el que buscas. */
}


Ahora, ten en cuenta que tu imagen ocupa un espacio. Quizas lo que quieras es que sea un background-image de algún div, no? (como para hacer un cover, o slider).

MODIFICO: Leyendo mi mensaje creo que sería mejor explicarte las primeras lineas del código. Así que le pondré comentarios.

[Locura_23]

@3n31ch  Si era exactamente esa la duda, muchas gracias por tu respuesta! entonces colocas la imagen del header dentro de un <div> para poder personalizarlo más no ? Saludos

[3n31ch]

El header, el div o lo que sea no es importante. Tu puedes hacer de un h1 un contenedor si así lo quieres. Aca solo con un header:

Código (css) [Seleccionar] Expandir


* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
header {
background-image: url(https://image.freepik.com/free-photo/hand-painted-watercolor-background-with-sky-clouds-shape_24972-1095.jpg); /* puse una imagen random de internet */
background-repeat: no-repeat; /* le indico que si llega a su tamaño maximo no se repita */
background-size: 100% auto; /* le digo que se escale usando todo el ancho disponible, y el alto se autoajuste para mantener la proporción */
min-height: 5rem; /* le puse un alto minimo (recuerda que ahora es una imagen de fondo, osea que ya no ocupa un espacio por si mismo) */
}


Ahora puedes ponerle un h1 a tu header o lo que quieras. La imagen se verá por detras.

Para mas detalles de como usar imagenes de fondo te recomiendo buscar en MDN
https://developer.mozilla.org/es/

[Locura_23]

Entiendo, quedó clarisimo con los comentarios   Creas un estilo con CSS (en este caso un header) y luego podría utilizarlo con el atributo class. O sino podría directamente modificar el elemento img o header...
Le voy a hechar una leída a esa documentación, gracias @3n31ch

[3n31ch]

Genial!.
Bueno, si estas dispuesto a meterte en el mundo del desarrollo web, esa página será tu mejor amiga. Suerte y mucha energía, te queda un camino largo por delante, hahaha.

Cualquier cosa pregunta por el foro, si pillo el mensaje te respondo. Suerte!.

[Locura_23]

Gracias genio saludos