Taille / miniature d'image personnalisée - Recadrage / rapport hauteur / largeur même lorsque l'image source est plus petite que les dimensions définies

Normalement, lorsque vous définissez une taille d'image personnalisée à l'aide d'un recadrage dur, par exemple add_image_size( 'custom-size', 400, 400, true );, vous obtenez les résultats suivants:

• # 1 Image téléchargée: 600x500> Vignette: 400x400.
• # 2 Image téléchargée: 500x300> Vignette: 400x300.
• # 3 Image téléchargée: 300x200> Vignette: 300x200.

Cependant, ce que j'aimerais faire, c'est quand l'image téléchargée est plus petite que la largeur, ou la hauteur, ou les deux, de la taille d'image personnalisée, par exemple les exemples # 2 et # 3 ci-dessus - au lieu que l'image soit juste rognée pour s'adapter dans ces dimensions - il est également recadré pour correspondre à leur rapport d'aspect (qui dans ce cas est 1: 1) comme suit:

• # 1 Image téléchargée: 600x500> Vignette: 400x400.
• # 2 Image téléchargée: 500x300> Vignette: 300x300 .
• # 3 Image téléchargée: 300x200> Vignette: 200x200 .

Je ne crois pas que cela soit possible en utilisant les options standard add_image_size, mais est-ce possible en utilisant une fonction différente, ou un crochet qui modifie la fonction add_image_size?

Ou existe-t-il un plugin qui ajoute cette fonctionnalité?

Toute information que n'importe qui peut fournir serait grandement appréciée.

Vous avez raison, cela ne fonctionne tout simplement pas comme ça.

Si vous pouvez penser à votre question dans l'autre sens, vous pouvez obtenir le bon résultat dans les navigateurs modernes en utilisant une sélection de tailles d'image et d'images réactives.

Si vous utilisez un code comme celui-ci:

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 );

... et dans vos modèles quelque chose comme:

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

... puis par défaut (WP 4.4 et versions ultérieures), vous obtiendrez une balise d'image avec la plus petite version de votre ensemble en tant que srcet les plus grandes tailles dans l' srcsetattribut, que les navigateurs plus récents choisiront et afficheront la plus grande version appropriée.

Donc, si une image particulière n'a pas de version plus grande, cela n'a pas d'importance. Une image qui 300x200aura une 200x200version sera faite, cette version sera la seule dans le HTML et tous les navigateurs la montreront.

J'ai travaillé cela tout en ajustant les images réactives afin d'obtenir de bonnes performances sur les navigateurs qui ne prennent en charge srcque non srcset.

Ce n'est pas une très bonne solution car c'est une solution CSS plus récente et elle ne fonctionne que dans 78,9% des navigateurs des utilisateurs , mais il existe quelques polyfills qui peuvent surmonter ces images d'ajustement d'objet et fitie

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

Idéalement, il serait préférable que les images plus petites soient mises à l'échelle proportionnellement lors du téléchargement, mais je n'ai pas pu trouver de solution pour cela.