Ajuste automático de imágenes en WordPress

En varias ocasiones nos podemos encontrar con un pequeño problema de ajuste de imágenes a la hora de publicar nuevos artículos en nuestros blogs de WordPress. Subimos una imagen nueva pero que, por lo que sea, supera el ancho que tenemos disponible para publicar artículos y la imagen o no se ve completa, o se “come” al resto de contenido que podamos tener en la parte de la derecha, por lo que nos vemos obligados a ajustarla añadiendo un width=””.

Esto, si solo lo tenemos que hacer una vez en cada artículo puede ser más o menos llevadero, pero cuando tenemos que hacerlo con múltiples imágenes se convierte en una tarea muy pesada y aburrida.

Para que todas las imágenes que publiquemos en nuestros artículos de wordpress tengan el ancho ajustado de forma automática (obviamente sin distorsionar la imagen), tan solo tenemos que añadir dos lineas de código a nuestra hoja de estilos (style.css).

1.- Buscamos la palabra img en nuestra hoja de estilos y, en función de cómo haya sido desarrollada podremos encontrarnos con cosas distintas. En mi caso, al buscar esta palabra me encuentro con lo siguiente:

.postContent img {
margin: 10px;
}

2.- Bien, una vez encontrado esto, tenemos que definir qué ancho máximo queremos para nuestras imágenes. En mi caso, el ancho máximo va a ser 520px, por lo que tengo que añadir las siguientes líneas al estilo mencionado:

max-width: 520px;
width: expression(this.width > 520 ? 520: true);

3.- Una vez completado, debería quedarnos de la siguiente forma:

.postContent img {
margin: 10px;
max-width: 520px;
width: expression(this.width > 520 ? 520: true);
}

4.- Guardamos el archivo y lo volvemos a subir al directorio de la plantilla en nuestro servidor.

Tan sencillo como útil!