web-dev-qa-db-fra.com

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> Miniature: 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 lorsque 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 exemples # 2 & # 3 ci-dessus - au lieu que l'image soit juste rognée pour tenir dans ces dimensions - elle est également rognée pour correspondre à leur rapport d'aspect (qui dans ce cas est 1: 1) comme ceci:

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

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 quiconque peut fournir serait grandement appréciée.

imagescropping
11
Joey Joe Joe Junior Shabadoo

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 cela object-fit- images 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.

2
Bryan Willis

Vous avez raison, cela ne fonctionne 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 comme src et les plus grandes tailles dans l'attribut srcset, quels navigateurs plus récents sélectionnera et affichera 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 est 300x200 aura un 200x200 version faite, cette version sera la seule dans le HTML et tous les navigateurs la montreront.

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

2
Andy Macaulay-Brook