web-dev-qa-db-fra.com

La question du ratio d'aspect des miniatures

J'ai utilisé une vignette comme celle-ci dans l'un des modèles de mon thème wordpress →

<?php the_post_thumbnail( 'medium' ); ?>

Dans le navigateur, le rendu est le suivant →

<img 
    width="300" 
    height="220" 
    src="http://example.com/image-300x220.jpg" 
    class="attachment-medium size-medium wp-post-image" 
    alt="" 
    srcset="
        http://example.com/image-300x220.jpg 300w, 
        http://example.com/image.jpg 640w" 
    sizes="(max-width: 300px) 100vw, 300px"
>

Ma première question est de savoir comment mettre height = auto. Existe-t-il une fonction qui puisse nous aider à atteindre cet objectif? comme responsive-img

En bref, je demande si je dois contrôler la largeur à travers le CSS ou WordPress donne une fonction pour le faire?

post-thumbnailsset-post-thumbnail-size
2
The WP Novice

Si vous souhaitez supprimer la valeur de hauteur de votre URL img, vous pouvez utiliser cette fonction:

add_filter( 'post_thumbnail_html', 'remove_thumbnail_height', 10, 5 );
function remove_thumbnail_height( $html, $post_id, $post_thumbnail_id, $size, $attr ) {
    $html = preg_replace( '/height=\"\d*\"/', "", $html );
    return $html;
}

Cela remplacera la hauteur par une valeur vide. Notez que vous ne pouvez pas utiliser Auto comme valeur pour la propriété height. Il ne sera pas validé par le validateur w3. Cependant, vous pouvez définir la hauteur sur auto dans votre CSS:

.wp-post-image {
    height: auto;
}
1
Jack Johansson

Vous pouvez utiliser quelque chose comme ça,

vous pouvez utiliser le second paramètre comme un tableau d'attributs comme

the_post_thumbnail('medium', ['class' => 'img-responsive', 'alt' => get_the_title()]);

Si vous n'utilisez pas le framework bootstrap, dans la feuille de style

.img-responsive{
   width: 100%;
}
1
Bikash Waiba