elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado:


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Ajustar imagen al tamaño del navegador
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Ajustar imagen al tamaño del navegador  (Leído 3,817 veces)
Locura_23

Desconectado Desconectado

Mensajes: 162



Ver Perfil
Ajustar imagen al tamaño del navegador
« en: 3 Agosto 2021, 20:10 pm »

Buenas gente, estoy aprendiendo html y css, y al momento de hacer una imagen para el header (muy simple, con paint  :xD) 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
  1. <header>
  2. <img src = "imagenes/header.png" alt = "logo unikami" />
  3. <h1> Bienvenido a la página de Unikami Soft </h1>
  4. <time> 2020-07-31 </time>
  5. </header>
  6.  



En línea

3n31ch


Desconectado Desconectado

Mensajes: 445


Grandes conocimientos engendran grandes dudas


Ver Perfil
Re: Ajustar imagen al tamaño del navegador
« Respuesta #1 en: 3 Agosto 2021, 20:18 pm »

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
  1. * { /* Necesario para sobre escribir todos los elementos (estos tienen un valor por defecto que no nos interesa) */
  2. 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 */
  3. margin: 0; /* eliminamos todos los margenes externos por defecto */
  4. padding: 0; /* eliminamos todos los margenes internos por defecto */
  5. /* en resumen, el código de arriba es para dejar todo sin espaciado ni cosas raras por defecto */
  6. }
  7. img { /* seleccionamos todas las imagenes, acá puede poner la clase de tu imagen o la id, como te sea necesario */
  8. 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. */
  9. }
  10.  

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.


« Última modificación: 3 Agosto 2021, 20:27 pm por 3n31ch » En línea

Locura_23

Desconectado Desconectado

Mensajes: 162



Ver Perfil
Re: Ajustar imagen al tamaño del navegador
« Respuesta #2 en: 3 Agosto 2021, 20:34 pm »

@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
En línea

3n31ch


Desconectado Desconectado

Mensajes: 445


Grandes conocimientos engendran grandes dudas


Ver Perfil
Re: Ajustar imagen al tamaño del navegador
« Respuesta #3 en: 3 Agosto 2021, 20:51 pm »

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
  1. * {
  2. box-sizing: border-box;
  3. margin: 0;
  4. padding: 0;
  5. }
  6. header {
  7. 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 */
  8. background-repeat: no-repeat; /* le indico que si llega a su tamaño maximo no se repita */
  9. background-size: 100% auto; /* le digo que se escale usando todo el ancho disponible, y el alto se autoajuste para mantener la proporción */
  10. 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) */
  11. }
  12.  

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/
En línea

Locura_23

Desconectado Desconectado

Mensajes: 162



Ver Perfil
Re: Ajustar imagen al tamaño del navegador
« Respuesta #4 en: 3 Agosto 2021, 21:27 pm »

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
« Última modificación: 3 Agosto 2021, 21:33 pm por Locura_23 » En línea

3n31ch


Desconectado Desconectado

Mensajes: 445


Grandes conocimientos engendran grandes dudas


Ver Perfil
Re: Ajustar imagen al tamaño del navegador
« Respuesta #5 en: 3 Agosto 2021, 22:10 pm »

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!.
En línea

Locura_23

Desconectado Desconectado

Mensajes: 162



Ver Perfil
Re: Ajustar imagen al tamaño del navegador
« Respuesta #6 en: 4 Agosto 2021, 00:27 am »

Gracias genio saludos
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines