Tamaño / miniatura de imagen personalizada: recorte a relación de aspecto incluso cuando la imagen de origen es más pequeña que las dimensiones establecidas

Normalmente, cuando establece un tamaño de imagen personalizado con recorte duro, por ejemplo add_image_size( 'custom-size', 400, 400, true );, obtiene los siguientes resultados:

• # 1 Imagen cargada: 600x500> Miniatura: 400x400.
• # 2 Imagen cargada: 500x300> Miniatura: 400x300.
• # 3 Imagen cargada: 300x200> Miniatura: 300x200.

Sin embargo, lo que me gustaría hacer es cuando la imagen cargada es más pequeña que el ancho establecido, o la altura, o ambos, del tamaño de imagen personalizado, por ejemplo, los ejemplos # 2 y # 3 anteriores, en lugar de que la imagen se recorte para ajustarse dentro de esas dimensiones, también se recorta para que coincida con su relación de aspecto (que en este caso es 1: 1) así:

• # 1 Imagen cargada: 600x500> Miniatura: 400x400.
• # 2 Imagen cargada: 500x300> Miniatura: 300x300 .
• # 3 Imagen cargada: 300x200> Miniatura: 200x200 .

No creo que esto sea posible usando las opciones estándar add_image_size, pero ¿es posible usar una función diferente o un gancho que modifique la función add_image_size?

¿O hay un complemento que agrega esta funcionalidad?

Cualquier información que alguien pueda proporcionar sería muy apreciada.

Tienes razón en que simplemente no funciona así.

Sin embargo, si está bien pensar su pregunta al revés, puede obtener el resultado correcto en los navegadores modernos utilizando una selección de tamaños de imagen e imágenes receptivas.

Si usa un código como este:

add_image_size( 'custom-size-small', 200, 200, true );
add_image_size( 'custom-size-medium', 300, 300, true );
add_image_size( 'custom-size-large', 400, 400, true );

... y en tus plantillas algo como:

wp_get_attachment_image( $image_ID, 'custom-size-small' )

... luego, de forma predeterminada (WP 4.4 y posterior), obtendrá una etiqueta de imagen con la versión más pequeña de su conjunto como srcy los tamaños más grandes en el srcsetatributo, que los navegadores más nuevos elegirán y mostrarán la versión apropiada más grande.

Entonces, si una imagen en particular no tiene una versión más grande, no importa. Se 300x200creará una 200x200versión de una imagen , esa versión será la única en el HTML y todos los navegadores la mostrarán.

Resolví esto mientras ajustaba imágenes receptivas para obtener un buen rendimiento en navegadores que solo son compatibles srcy no srcset.

Esta no es una solución realmente buena ya que es una solución CSS más nueva y solo funciona en el 78.9% de los navegadores de los usuarios , pero hay algunos polyfills que pueden superar ese ajuste de imagen y ajuste de objeto.

img {
    display: block;
    overflow: hidden;
    width: 400px;
    height: 400px;
    -o-object-fit: cover;
       object-fit: cover;
}

Idealmente, sería mejor si las imágenes más pequeñas se escalaran proporcionalmente en la carga, pero no he podido encontrar una solución para eso.