wake-up-neo.net

Wie kann ich mithilfe des srcset-Attributs die Bildgröße festlegen und trotzdem reaktionsfähige Bilder haben?

Ich habe diese Funktion in meinem Design, um Miniaturansichten zu erstellen.

  set_post_thumbnail_size( 620, 848, true );
            if (function_exists('add_image_size')){
                    add_image_size( 'compare-shop-logo', 150 );
                    add_image_size( 'compare-single-product-2', 250, 188, true );
                    add_image_size( 'compare-slider-image', 848, 487, true );
                    add_image_size( 'compare-offer-box', 400, 300, true);
                    add_image_size( 'compare-blog-box', 400, 225, true );
                    add_image_size( 'compare-quote-box', 408, 437, true );
            }

Wie kommt es, dass ich, wenn ich die Angebotsgrößen ändere, das srcset und die Größen im img-Tag verliere? Und gibt es eine Möglichkeit, die Größe zu ändern und die Proportionen beizubehalten?

<img width="400" height="300" src="myimage-400x300.jpg" class="embed-responsive-item wp-post-image" alt="image" srcset="myimage-1-400x300.jpg 400w, http:///myimage-250x188.jpg 250w" sizes="(max-width: 400px) 100vw, 400px">

vielen Dank

5
Sam Provides

Das Attribut srcset besteht aus Bildern mit demselben Seitenverhältnis. Erstellen Sie ein paar davon und Sie werden in Ordnung sein.

add_image_size( 'compare-offer-box', 400, 300, true);
add_image_size( 'compare-offer-box-2', 800, 600, true);
add_image_size( 'compare-offer-box-3', 1200, 900, true);

zum Beispiel. Das vierte, boolesche Argument weist WP an, auf die genauen Proportionen zuzuschneiden.

Verwenden Sie zum Ändern der Größe ohne Zuschneiden Folgendes:

add_image_size( 'compare-offer-box', 400, 9999, false);
add_image_size( 'compare-offer-box-2', 800, 9999, false);
add_image_size( 'compare-offer-box-3', 1200, 9999, false);

Dies setzt voraus, dass Sie ein Bild mit einer bestimmten Breite und dann die Höhe wünschen, die die Proportionen erfordern. Im Web wird Code angezeigt, der die Werte 0 oder null für die nicht beschränkte Dimension verwendet. Kommentare im Quellcode WP warnen jedoch davor, dass dies zu "unvorhersehbaren Ergebnissen" führen kann.

Wenn Sie beim Beschränken der Höhe lieber proportional skalieren möchten, verwenden Sie einfach einen großen Wert für die Breite:

add_image_size( 'compare-offer-box', 9999, 400, false);
add_image_size( 'compare-offer-box-2', 9999, 800, false);
add_image_size( 'compare-offer-box-3', 9999, 1200, false);

Wenn Sie die Proportionen beibehalten möchten, das Bild jedoch so skalieren möchten, dass es in einen bestimmten Bereich passt, z. B. 400 x 400 Pixel, können Sie sowohl die maximale Breite als auch die maximale Höhe angeben, wobei der Zuschnitt jedoch auf false festgelegt ist:

add_image_size( 'compare-offer-box', 400, 400, false);

Beachten Sie, dass Sie, wenn Sie die Größe einschränken, möglicherweise auch das Größenattribut anpassen möchten, da standardmäßig die Breite des Ansichtsfensters mit einem Maximalwert für die Breite der angegebenen Bildgröße verwendet wird.

Vergessen Sie nicht, dass Sie dann die Bildgrößen für Ihre vorhandenen Bilder neu generieren müssen. Es gibt Plugins, die dies gut können: Suchen Sie im Plugin-Repository nach Regenerate Thumbnails.

9