WordPress añade por defecto y de forma automática la información del alto y ancho de la imagen que subimos desde su gestor multimedia. Para un diseño fluido o responsive no nos interesa ese dato, pues haría que salieran en pantalla a un tamaño fijo, todo lo contrario a lo que se persigue con estos diseños, en los que queremos que se adapte al tamaño de pantalla de nuestro dispositivo.
Para eso, debemos quitar en la etiqueta img el alto y ancho desde los filtros de nuestro theme, y ajustar las CSS para que muestren las imágenes a un máximo del 100%, independiente del tamaño original de la imagen.
Ajustar las CSS:
img{max-width: 100%;}
En el fichero functions.php de nuestro theme añadimos una función que quite los tags width y height de la función del core de WordPress:
// Remove thumbnail width and height dimensions that prevent fluid images in the_thumbnail
function remove_thumbnail_dimensions( $html )
{
$html = preg_replace('/(width|height)=\"\d*\"\s/', "", $html);
return $html;
}
Y en el mismo fichero de functions.php añadir los filtros:
Este quita los atributos width y height de los thumbnails:
add_filter('post_thumbnail_html', 'remove_thumbnail_dimensions', 10);
Y este otro los quita de las imágenes de los mensajes:
add_filter('image_send_to_editor', 'remove_thumbnail_dimensions', 10);
Que lo disfrutéis