Limitar tamaño de imágen automáticamente

La mayoría de las veces cuando quiero utilizar una imagen para un post es necesario reducir su tamaño, algo que es muy simple con WordPress y su editor de imágenes, pero aún así es un fastidio tener que hacerlo cada vez que publicamos una imagen.

Aquí en el blog hemos escrito algunos artículos sobre CSS y las imágenes, como por ejemplo el efecto cargando e imágenes transparentes.

Para arreglar esto tan sólo debemos agregar una líneas de código a nuestra hoja de estilos CSS y listo.

Con este truco lo que haremos será lo siguiente:

El ancho de la imagen será fijo, tu decides que tan ancho será, en este caso es de 530px.
La altura de la imagen será automática, quedando de un tamaño proporcional al ancho estipulado.

Este es el código:

PLAIN TEXT

.entry img {max-width:530px; height:auto}

Eso es todo, pero debemos aclarar que el efecto sólo se verá dentro del sitio, si, por ejemplo, leemos desde un lector de feeds, la imagen se verá de tamaño completo.

28/12/2009 Publicado en la Categoria:

CSS

Imprimir

Twitter

Menéame

Delicious

Technorati Votar en Bitácoras.com

Bitácoras

Facebook

Post Relacionados

12 Comentarios en “Limitar tamaño de imágen automáticamente”

Tweets that mention Truco CSS: Limitar tamaño de imágen automáticamente -- Topsy.com

Diciembre 28th, 2009 a las 6:26 pm

[...] This post was mentioned on Twitter by ferticidio and blogs, JuanK. JuanK said: [Post] Limitar tamaño de imágen automáticamente http://kl.am/5WMV [...]
Bitacoras.com

Diciembre 28th, 2009 a las 6:43 pm

Información Bitacoras.com...

Valora en Bitacoras.com: La mayoría de las veces cuando quiero utilizar una imagen para un post es necesario reducir su tamaño, algo que es muy simple con WordPress y su editor de imágenes, pero aún así es un fastidio tener que hacerlo cada vez que p.....
tikitakfire

Diciembre 31st, 2009 a las 3:55 am

Y la opción para limitar el alto y ancho de las imagenes que trae WP en Dashboard>Settings>Media? no te sirve?
Reply
JuanK

Diciembre 31st, 2009 a las 12:21 pm

@tikitakfire: no realmente, ya que esa opción genera thumbnails de las imágenes con ese tamaño determinado, generando una segunda imagen, ocupando más espacio dentro del servidor D:

Esta opción con CSS lo que hace es redimensionar la imagen, sin necesidad de crear una nueva.
Reply
Warez

Enero 1st, 2010 a las 4:04 pm

Usaba un plugin para esto, pero voy a probar esta opcion que nos comentas a ver si me funciona tb Gracias
Reply
DoctorPC

Enero 1st, 2010 a las 8:20 pm

Un buen truco, aunque yo prefiero a la antigua, editar con paint.net, parte nos ahorramos un par de kb al mes por cada img subida
Reply
JuanK

Enero 1st, 2010 a las 10:32 pm

@DoctorPC: tal vez, pero es fome hacer eso xD

Prefiero hacerlo así y usar un optimizador de imágenes online, como el que ya mostré hace un tiempo :B

@Warez: siempre es preferible usar un código a un plugin, aumenta la velocidad del sitio, ya que necesita menos peticiones a la base de datos.

Gracias por los comentarios
Reply
Limitar el tamaño de las imagenes en wordpress | Ferticidio's

Enero 4th, 2010 a las 7:00 pm

[...] y practico truco que publican en bloggin.net para limitar el tamaño de las imágenes en wordpress. Ideal para no tener que andar retocando las imágenes una por una cuando cambiamos de [...]
Carlos3dx

Junio 6th, 2010 a las 1:43 pm

Muchísimas gracias, me has librado de un buen quebradero de cabeza.
Reply
Limitar imágenes en Wordpress.org « Carlos3dx Blog

Junio 9th, 2010 a las 5:05 am

[...] Sacado de Programo Web [...]
Limitar imágenes en Wordpress.org | Carlos3dx Blog

Junio 9th, 2010 a las 6:49 am

[...] de Programo Web Posted in Informatica, Internet Tags: blog, imagen, imágenes, limitar, redimensionar, wordpress [...]
Limitar imágenes en Wordpress.org | Carlos3dx Blog

Junio 11th, 2010 a las 2:41 pm

[...] de Programo Web Posted in Informática, Internet Tags: blog, imagen, imágenes, limitar, redimensionar, [...]