Ich möchte je nach Mediengröße eine andere Post-Thumbnail-Größe haben

Ich habe den folgenden Code auf meiner Homepage

<?php echo ''; ?> 

Die große Größe ist in diesem Fall 1920×245. Dies funktioniert in einem Browser, aber wenn das Bild auf kleineren Bildschirmen verkleinert wird, ist es für meinen Geschmack zu dünn. Ich möchte in diesem Szenario ein Bild mit einem anderen Seitenverhältnis verwenden.

Wie stelle ich den oben genannten PHP-Code so ein, dass er auf die Mediengröße reactjs?

Solutions Collecting From Web of "Ich möchte je nach Mediengröße eine andere Post-Thumbnail-Größe haben"

Sie können die function [wp_calculate_image_srcset()][1] , eine Hilfsfunktion , um den srcset-Attributwert für eine Image-ID zurückzugeben. Die verschiedenen Größen müssen vorhanden sein, andernfalls gibt die function false zurück.

So sieht eine Verknüpfung mit srcset aus,

 C0101-012 

Mit srcset ermittelt der Browser, welches Bild am besten ist. In Browsern ohne srcset-Unterstützung wird der Wert des src-Attributs als Standard-Image-Image (Haupt-Browser-Unterstützung srcset) verwendet.

Hier ist ein kleines Beispiel, ich musste zufügen ein großes Schnittbild zufügen und das neue Attribut für dieses Bild erzeugen. Medien kommen von einem generischen Array, ich vereinfache alles in einer function,

 function enqueue_front_page_srcset_js(){ $random_array = array('id'=>'1234', 'url'=>'http://example.com/wp-content/uploads/2016/03/C0948b-162.jpg', ...); $random_key = array_rand($images_array, 1); $random_image = $images_array[$random_key]; $size_array = array(array(656, 394), array(1024, 614),array(1080, 648)); $image_src = $random_image['url']; $image_meta = wp_get_attachment_metadata( $random_image['id'] ); $img_srcset = wp_calculate_image_srcset( $size_array, $image_src, $image_meta, $random_image['id'] ); wp_register_script( 'brozzme-random-image', get_stylesheet_directory_uri() . '/js/jquery.b7e.random.image.js', array( 'jquery' ), false, true ); wp_localize_script( 'b7e-random-image', 'randomImage', array( 'newSrc'=> $image_src, 'randomSrcset'=> $img_srcset ) ); wp_enqueue_script('b7e-random-image'); } add_action('wp_enqueue_scripts', 'enqueue_front_page_srcset_js'); 

Das jQuery-Skript

 jQuery(document).ready(function ($) { var newSrc = randomImage.newSrc; var newSrcset = randomImage.randomSrcset; $( ".et_pb_fullwidth_image_0 img" ).attr( "src", newSrc ); $( ".et_pb_fullwidth_image_0 img" ).attr( "srcset", newSrcset ); }); 

Ich hoffe es hilft!

Wie so oft (mit meinen Fragen sowieso!) Ist die Antwort einfach. Ich fügte dem Styling für das Bild einen Mindesthöhenparameter von 85 Pixel hinzu und schneidet das Bild ab, sobald es diese Höhe erreicht hat. Genau das, was ich wollte.

 .img-responsive{ display:block; max-width: 100%; height:auto; min-height: 85px; }