Как масштабировать анимированную gif картинку по ширине записи в wordpress?

Question

[misterblack]

Как масштабировать анимированную gif картинку по ширине записи в wordpress?Вставил в запись гифку sixbee.ru/zhivotnye-kotorye-slishkom-xorosho-edyat...
растянул в редакторе, размер остался не масштабированным. Нужно чтоб ширина гифки была в 600 пкс
В wp масштабирование работает только в сторону уменьшения.

Answer 1

[Александр Цымбал]

у этой картинки нужно добавить класс и прописать для этого класса стили

width: 100%; //масштабируем ширину картинки по всей ширине родительского элемента
height: auto; //а высота картинки автоматически подстраивается под ширину, чтобы сохранить пропорции

а в тэге картинки конечно удалить атрибуты ширины и высоты - на всякий случай. вообще css переписывает атрибуты тэга.

Comments

[misterblack]

а можно поподробнее пожалуйста?

[misterblack]

В файле function.php для одиночной записи имеет данный код
// Single Post
add_image_size( 'single_thumb', $sng_width, $sng_height, $sng_crop );

В файле style.css так же для записи имее такой код

/* Single Posts */

.entry-header img.wp-post-image {
margin-bottom: 1.5em;
}

.single article {
position: relative;
border-bottom: 1px solid #e5e5e5;
}

Где править?

Answer 2

[misterblack]

В файле function.php для одиночной записи имеет данный код

// Single Post
	add_image_size( 'single_thumb', $sng_width, $sng_height, $sng_crop );

В файле style.css так же для записи имее такой код

/* Single Posts */

.entry-header img.wp-post-image {
	margin-bottom: 1.5em;
}

.single article {
	position: relative;
	border-bottom: 1px solid #e5e5e5;
}

Где править? ^^

Comments

[Александр Цымбал]

Правки нужно внести только в файле стилей.
Сейчас ты добавил несколько классов для картинок. joxi.ru/vAWeoZyHkv9jmW - здесь я подчеркнул эти классы.
Возьми например, допиши для класса full-size в файле стилей (main.css, строка 8) новое правило width: 100%. Но такой вариант может повредить и другие классы, указанные в селекторе на этой строке.
Поэтому лучше допиши в конце файла стилей (main.css) новую строку со следующим содержанием:
img.size-full {width: 100%; max-width: 100%; height: auto;}
И далее, ко всем картинкам, вставляемым в строку, добавляй этот класс (class="size-full"), можно добавлять и другие классы, но лучше будет, если этот класс будет идти последним. И в файле стилей тоже не забудь дописать строку именно в конце, чтобы после этого правила ничто не переписало его.

[misterblack]

Спасибо огромное Александр!!!! Все получилось! Очень Вам благодарен!!!