Scalabilità responsive per le immagini con the_post_thumbnail() in WordPress

Question

Scalabilità responsive per le immagini con the_post_thumbnail() in WordPress

7 mar 2014, 17:59:57

Visualizzazioni: 13.8K

Voti: 0

Nel mio file functions.php, ho:

add_theme_support( 'post-thumbnails' );
add_image_size( 'kev-feature', 650, 342, true );

In un file template, ho:

<div class="article-feature-image"><?php the_post_thumbnail('kev-feature'); ?></div>

Ho un design responsive e voglio che l'immagine, che dovrebbe avere una dimensione massima di 650x342, si ridimensioni al ridursi del browser. Attualmente non lo fa. Ho notato che il tag HTML img generato ha l'altezza e larghezza hardcoded, quindi presumo che questo sia il motivo per cui non scala.

Cosa sto sbagliando?

RailsTweeter

263

immagini in evidenza responsive

Tutte le risposte alla domanda

Commenti

Immagino tu volessi scrivere echo $img_url[0] ?

birgire

3 lug 2014 21:37:44

elleeott 315 · Answer 1 · 2014-03-07T18:12:52Z

Questo è più un problema di CSS che un problema con WordPress. Le dimensioni specificate nel tag HTML img hanno una specificità pari a 0, quindi qualsiasi regola CSS le sovrascriverà. Questa soluzione dovrebbe funzionare:

.article-feature-image img {
    width:100%;
    max-width:650px;
    height:auto;
}

Per riferimento, potresti utilizzare la funzione wp_get_attachment_image_src per ottenere l'attributo URL dell'immagine in evidenza e costruire manualmente il tuo tag img senza gli attributi di altezza e larghezza:

<?php $img_url = wp_get_attachment_image_src(get_post_thumbnail_id(),'kev-feature'); ?>
<img src="<?php echo $img_url[0];?>"/>

elleeott

315

7 mar 2014 18:12:52