Benutzerdefinierte Bildgröße / Miniaturansicht – Zuschneiden auf Seitenverhältnis, auch wenn das Quellbild kleiner als die festgelegten Abmessungen ist

Normalerweise, wenn Sie eine benutzerdefinierte Bildgröße mit hartem Bildausschnitt add_image_size( 'custom-size', 400, 400, true ); – z. B. add_image_size( 'custom-size', 400, 400, true ); – Sie erhalten folgende Ergebnisse:

  • # 1 Hochgeladenes Bild: 600×500> Vorschaubild: 400×400.
  • # 2 Hochgeladenes Bild: 500×300> Vorschaubild: 400×300.
  • # 3 Hochgeladenes Bild: 300×200> Vorschaubild: 300×200.

Was ich jedoch gerne machen würde, wenn das hochgeladene Bild kleiner als die eingestellte Breite oder Höhe oder beides der benutzerdefinierten Bildgröße ist, zB die Beispiele # 2 und # 3 oben – anstatt dass das Bild gerade zugeschnitten wird innerhalb dieser Dimensionen – es ist auch zugeschnitten, um ihr Seitenverhältnis (was in diesem Fall 1: 1 ist) wie folgt anzupassen:

  • # 1 Hochgeladenes Bild: 600×500> Vorschaubild: 400×400.
  • # 2 Hochgeladenes Bild: 500×300> Vorschaubild: 300×300 .
  • # 3 Hochgeladenes Bild: 300×200> Vorschaubild: 200×200 .

Ich glaube nicht, dass dies mit den Standardoptionen von add_image_size möglich ist, aber ist es möglich, eine andere function oder einen Hook zu verwenden, der die function add_image_size modifiziert?

Oder gibt es ein Plugin, das diese functionalität hinzufügt?

Jede Information, die jemand zur Verfügung stellen kann, würde sehr geschätzt werden.

Solutions Collecting From Web of "Benutzerdefinierte Bildgröße / Miniaturansicht – Zuschneiden auf Seitenverhältnis, auch wenn das Quellbild kleiner als die festgelegten Abmessungen ist"

Du hast Recht, dass es einfach nicht so funktioniert.

Wenn es in Ordnung ist, Ihre Frage anders herum zu denken, können Sie das richtige Ergebnis in modernen Browsern mit einer Auswahl an Bildgrößen und responsiven Bildern erzielen.

Wenn Sie Code wie folgt verwenden:

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

… und in deinen Vorlagen etwas wie:

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

… dann standardmäßig (WP 4.4 und höher) erhalten Sie ein Image-Tag mit der kleinsten Version aus Ihrem Set als src und die größeren Größen im srcset -Attribut, aus dem neuere Browser auswählen und die größte passende Version anzeigen.

Wenn also ein bestimmtes Bild keine größere Version hat, spielt es keine Rolle. Ein Bild, das 300x200 wird eine 200x200 Version haben, diese Version wird die einzige im HTML sein und alle Browser werden es zeigen.

Ich habe das ausgearbeitet, indem ich responsive Bilder srcset , damit ich eine gute performance in Browsern bekomme, die nur src und nicht srcset .

Dies ist keine wirklich gute Lösung, da es sich um eine neuere CSS-Lösung handelt, die nur in 78,9% der Browser von Benutzern funktioniert, aber es gibt einige Polyfills, die diese Objecte -fit-Bilder und -Fitches überwinden können

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

Im Idealfall wäre es besser, wenn die kleineren Bilder beim Hochladen proportional skaliert werden, aber ich habe keine Lösung dafür gefunden.