Адаптивное масштабирование изображения для the_post_thumbnail()

Question

Адаптивное масштабирование изображения для the_post_thumbnail()

7 мар. 2014 г., 17:59:57

Просмотры: 13.8K

Голосов: 0

В моем файле functions.php есть:

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

В файле шаблона у меня:

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

У меня адаптивный дизайн, и я хочу, чтобы изображение с максимальным размером 650x342 уменьшалось при сжатии браузера. Сейчас этого не происходит. Я заметил, что в HTML-теге img, который выводится, жестко прописаны высота и ширина, поэтому, предполагаю, это мешает масштабированию.

Что я делаю не так?

RailsTweeter

263

миниатюры записей адаптивный

Все ответы на вопрос

Комментарии

Думаю, вы хотели написать echo $img_url[0] ?

birgire

3 июл. 2014 г. 21:37:44

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

Это скорее проблема CSS, а не WordPress. Размеры, указанные в HTML-теге img, имеют специфичность 0, поэтому любые правила CSS будут их переопределять. Это должно сработать:

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

Для справки: вы можете использовать функцию wp_get_attachment_image_src, чтобы получить URL атрибут для изображения записи и вручную создать тег img без атрибутов высоты и ширины:

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

elleeott

315

7 мар. 2014 г. 18:12:52