1. ¡OFERTA! con cupón "DIRVPS": hosting por $0,01 y también VPS Linux y Windows por $0,01 el primer mes por Interserver ← publi
    Descartar aviso
Descartar aviso
Al usar este sitio web, aceptas que nosotros y nuestros socios podamos establecer cookies para fines tales como personalizar el contenido y la publicidad. Más información.

Autoajustar imágenes luego de subirlas al servidor

Tema en 'Programación y Diseño Web' iniciado por luis14al, 19 Mar 2008.

  1. luis14al

    luis14al Nuevo usuario

    Hola, buenas, tengo un pequeño inconveniente, lo que pasa es que tengo un hosting de imágenes donde la gente puede subir sus imágenes, y luego de subirlas, redirige hacia otra página en la que te muestra los códigos para enlazar la imágen junto con la imagen, pero en tamaño real. Lo que sucede es que si la imagen es demaciado grande me descuadra la Web y lo que quería saber es como hacer, para que una vez superado cierto límite, la imagen sea reducida de tamaño, no necesariamente utilizando un thumbnail, puede ser modificando las propiedades weigth y height de la imagen, pero que si la imagen no supera ese tamaño, quede normal, sin modificaciones...

    esto es posible con php sin utilizar una librería como GD?.

    espero que me puedan ayudar...muchas gracias.

    Por si quieren ver lo que les cuento, la web es <a href="http://imagecero.idoo.com" target="_blank">www.imagecero.ya.st</a> o intentad con <a href="http://imagecero.idoo.com" target="_blank">http://imagecero.idoo.com</a>

    Luis.
     
  2.  
  3. Carxl

    Carxl Nuevo usuario

    <!--quoteo(post=294291:date=Mar 19 2008, 01:34 PM:name=luis14al)--><div class='quotetop'>CITA(luis14al @ Mar 19 2008, 01:34 PM) [snapback]294291[/snapback]</div><div class='quotemain'><!--quotec-->
    esto es posible con php sin utilizar una librería como GD?.
    <!--QuoteEnd--></div><!--QuoteEEnd-->

    Quizás necesites otra librería para esto, pero de que necesitas liberìa, necesitas librería sea cual sea B)

    Con GD esta la instrucción:

    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->
    getimagesize("ruta_de_la_imagen");
    <!--c2--></div><!--ec2-->

    Sin librerías no puedes... :huh: :arriba:

    Saludos, espero te sirva :adios:
     
  4. elQuique

    elQuique Usuario activo

    PHP sirve para modificar físicamente la imagen, lo cual no tendría sentido porque por algo lo hosteas en otro lado.

    Igualmente como te dicen, GD es para manejo de imagen, así como no puedes imprimir sin impresora, el PHP sin GD no modifica imagenes :p

    Por por otra parte tu quieres modificar la visualización, eso lo puedes hacer de 2 formas:

    Con CSS, asignando un ancho fijo width o un ancho máximo max-width a la clase de donde muestra las imágenes.

    Y la otra forma es con JavaScript + DOM detectas la imagen, miras su tamaño y si pasa lo cambias al vuelo.
     
  5. luis14al

    luis14al Nuevo usuario

    <!--quoteo--><div class='quotetop'>CITA</div><div class='quotemain'><!--quotec-->Con CSS, asignando un ancho fijo width o un ancho máximo max-width a la clase de donde muestra las imágenes.<!--QuoteEnd--></div><!--QuoteEEnd-->

    Eso del max-width me interesa, no deseo hacer un thumbnail, simplemente, que el tamaño de la imagen tenga un límite en la página, vamos, que se limite al tamaño de la tabla contenedora, supongo que con el max-width se podrá establecer un ancho máximo no?.

    Bueno, lo probaré y les cuento. Muchas gracias.

    <!--quoteo(post=294429:date=Mar 20 2008, 03:08 AM:name=elQuique)--><div class='quotetop'>CITA(elQuique @ Mar 20 2008, 03:08 AM) [snapback]294429[/snapback]</div><div class='quotemain'><!--quotec-->
    PHP sirve para modificar físicamente la imagen, lo cual no tendría sentido porque por algo lo hosteas en otro lado.

    Igualmente como te dicen, GD es para manejo de imagen, así como no puedes imprimir sin impresora, el PHP sin GD no modifica imagenes :p

    Por por otra parte tu quieres modificar la visualización, eso lo puedes hacer de 2 formas:

    Con CSS, asignando un ancho fijo width o un ancho máximo max-width a la clase de donde muestra las imágenes.

    Y la otra forma es con JavaScript + DOM detectas la imagen, miras su tamaño y si pasa lo cambias al vuelo.
    <!--QuoteEnd--></div><!--QuoteEEnd-->
    Genial, eres un genio Quique, muchisimas gracias, otra vez me sacas de apuros.

    :D
     
  6. elQuique

    elQuique Usuario activo

    Si claro es que max-width define el ancho máximo permitido.

    por ejemplo:

    <img src="foto.jpg" id="foto" />

    luego en css pones:

    #foto {
    max-width: 300px;
    }

    y listo toda foto menor a 300 px se mostrara con medidas originales, pero si alguna excede se autoajusta a 300.

    Debes tener en cuenta que esto funciona con navegadores web, no con algunos programas que no fueron pensado en los estándares, como este que se llame Internet Explorer, pero bueno hay algunos hacks que adicionan lo que le falta.
     
  7. luis14al

    luis14al Nuevo usuario

    Y que puedo utilizar para que me funcione también en internet explorer?, me gustaría saberlo.

    Gracias.
     
  8. elQuique

    elQuique Usuario activo

    También puedes usar expression, así:

    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->
    #container {
    width: expression((documentElement.clientWidth > 300) ? "300px" : "100%" );
    }
    <!--c2--></div><!--ec2-->

    El expression permite usar javascript en CSS, y ahí lo que dice es que si el ancho es mayor a 300, lo deje en 300, y si no bueno en el 100%.

    Esto así como esta definido lo tomarían todos los navegadores, pero siempre es mejor es usar las cosas como se debe, por tanto la mejor forma es así:
    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->
    #container {
    min-width:300px
    }
    <!--[if IE]>
    #container {
    width: expression((documentElement.clientWidth > 300) ? "300px" : "100%" );
    }
    <![endif]--
    <!--c2--></div><!--ec2-->

    De manera que todos los buenos navegadores usaran el max-width, en cambio si es el antiguo, nefasto, poco dócil, anti estándares IE (if IE) utilizara javascript para alterar el ancho.

    Si no te gusta esa forma puedes instalar en tu pagina un hack que descargas de acá:

    <a href="http://dean.edwards.name/IE7/" target="_blank">http://dean.edwards.name/IE7/</a>

    y lo que hace es corregir los problemas de los IE.
     
  9. luis14al

    luis14al Nuevo usuario

    <!--quoteo(post=294579:date=Mar 20 2008, 08:24 PM:name=elQuique)--><div class='quotetop'>CITA(elQuique @ Mar 20 2008, 08:24 PM) [snapback]294579[/snapback]</div><div class='quotemain'><!--quotec-->
    También puedes usar expression, así:

    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->
    #container {
    width: expression((documentElement.clientWidth > 300) ? "300px" : "100%" );
    }
    <!--c2--></div><!--ec2-->

    El expression permite usar javascript en CSS, y ahí lo que dice es que si el ancho es mayor a 300, lo deje en 300, y si no bueno en el 100%.

    Esto así como esta definido lo tomarían todos los navegadores, pero siempre es mejor es usar las cosas como se debe, por tanto la mejor forma es así:
    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->
    #container {
    min-width:300px
    }
    <!--[if IE]>
    #container {
    width: expression((documentElement.clientWidth > 300) ? "300px" : "100%" );
    }
    <![endif]--
    <!--c2--></div><!--ec2-->

    De manera que todos los buenos navegadores usaran el max-width, en cambio si es el antiguo, nefasto, poco dócil, anti estándares IE (if IE) utilizara javascript para alterar el ancho.

    Si no te gusta esa forma puedes instalar en tu pagina un hack que descargas de acá:

    <a href="http://dean.edwards.name/IE7/" target="_blank">http://dean.edwards.name/IE7/</a>

    y lo que hace es corregir los problemas de los IE.
    <!--QuoteEnd--></div><!--QuoteEEnd-->
    Tengo un pequeño inconveniente, perdon que te vuelva a molestar, gracias por tu esfuerzo, pero lo que me haz dicho que podría poner, o no se hacerlo bien o no me sale.

    La parte del código en la que esta relacionada esta parte, es esta:

    <!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1--><p align="center"><a href="http://imagecero.idoo.com/images/<?php echo $img; ?>"><img style="max-width:650px;" src="http://imagecero.idoo.com/images/<?php echo $img; ?>" border="0" title="Haz click en la imagen para verla en tamaño real"></a></p><!--c2--></div><!--ec2-->

    con lo que me dijiste antes, solo le puse el style con el max-width a 650 y perfecto en firefox, pero no me va en IE. Por lo que opté por lo otro que me dijiste, pero a las propiedades del img le agrego un "id='container'", pero no me aparece el container en la lista de estilos, estoy haciendolo mal verdad?, me podrías decir como puedo colocarlo bien?si es en la hoja de estilos, como debo llamar a esta funcion container?, lo que me diste, lo coloqué en la hoja de estilo que tengo aparte.

    Muchas gracias.

    Muchas gracias.
     


Alojamiento web, Hosting Reseller, Servidores Dedicados - All in Hosting


    
    
    
    
Blog · Sitios amigos: GuiaHosting · Unidominios · Interalta ·