Cómo hacer que una imagen se ajuste a la página

#1 (**permalink**) 04/06/2011, 13:17

Quiero mostrar wallapapers grandes en una página html, pero no consigo ajustarla de acuerdo al documento del navegador.

Observen, aquí tengo un ejemplo de la página:

Código Mi página:

Ver originalhttp://bit.ly/lTYbeF

Pero lo que quiero es que quede así, que se ajuste a la pantalla sin perder las dimensiones:

Código Imagen:

Ver originalhttp://bit.ly/itxPJB

Si se dan cuenta, la imagen se ajusta al documento y por más que yo reduzca la ventana esta se reajusta sin perder las dimensiones.

Quiero algo parecido, supongo que se hará con script o algo por el estilo, de ahí mi duda. ¿cómo?

zerokilled · #2 (**permalink**) 04/06/2011, 13:33

buenas,
fijate que hay una diferencia sustancial entre ambos enlaces. el primero es un documento html que carga la imagen mientras el segundo se carga directamente la imagen en el navegador. en el segundo caso, -no se si todos los navegadores se comporta de esa manera- el navegador automaticamente ajusta las proporciones a las dimensiones de la ventana. o sea, ahi no hay ningun script o codigo de por medio, es simplemente un comportamiento del navegador. de todos modos, eso no significa que no se pueda lograr en un documento html. la primera alternativa que se me ocurre sin usar scripting es aplicando un ancho o alto de 100% con css.

Código:

<img ... style="width:100%;" />

#3 (**permalink**) 04/06/2011, 13:40

Gracias zerokilled!! Eres de gran ayuda!! Apliqué lo que me dijiste, pero al alto en vez del ancho y... funcionó!! Otra vez GRACIAS!! Saludos!

#4 (**permalink**) 04/06/2011, 16:55

Chequea de nuevo la página, en Chrome hace lo que deseo, pero en los demás exploradores no, muestra la imagen en su tamaño original ¿alguna idea?

Lo tengo en height='100%', ya que si lo dejo en Width='100%' todas las imágenes tendrán el mismo ancho y así no me sirve. No entiendo por qué el único que lo toma es Chrome...

#5 (**permalink**) 04/06/2011, 17:21

Ya lo solucione xD Tengo que aplicarle al body un tamaño

zerokilled · #6 (**permalink**) 04/06/2011, 17:57

buenas,
lo que ocupas es mas bien tema de css o rendimiento (rendering) del navegador. ¿quien de los dos navegadores esta en lo correcto? no estoy seguro. por norma, las unidades relativas computan su valor en base a otro valor. ese valor base se identifica si existe alguna propiedad definida siguiendo el orden jerarquico de los elementos. por ejemplo, en el caso de las dimensiones (width | height) su valor predeterminado es auto. lo que significa que ocupa un tamaño automatico. asumiendo que tienes la siguiente estructura...

Código:

<body>
<div>
  <p>
    <img />
  </p>
</div>
</body>

un 100% de alto en la imagen (img) indica que va ocupar el alto de su ancestro (p). en el caso de firefox, si el ancestro tiene una altura definida entonces el elemento ocupara la misma altura que el ancestro. si el ancestro no tiene altura definida, entonces el elemento -segun las pruebas que hice- no cambia de dimension. nota: estamos hablando especificamente de la altura. el caso de chrome es distinto. en lugar de detenerse en el primer ancestro para calcular la altura, el motor continua hasta el elemento mas alto en la jerarquia (html) si ninguno de los ancestro tiene definido una altura. en este caso, el elemento toma la altura del viewport (area del navegador donde se muestra los documentos).

conclusion: todo dependera del resto de los estilos que tengas aplicados. no soy muy savvy en css, por lo que no sabria como resolverlo adecuadamente. al menos la explicacion debe servirte para comprender que esta sucediendo.

#7 (**permalink**) 04/06/2011, 22:37

Si de eso me di cuenta, según lo que entendí. Lo que hice fue averiguar el alto exacto del documento del navegador por medio de un script, luego ese valor se lo asigné al body como su altura, a partir de ahí la imagen se comportaba como quería. No sé si hice lo más adecuado, pero me alegró mucho cuando funcionó!!