CSS. Wordpress. Как сделать, чтобы при выводе записи картинки была шире текста?

Question

[Олег Степанов]

Делаю свою тему. Как сделать, чтобы при выводе содержимого записи картинка занимала 100% ширины браузера, а текст имел 5% отступы слева и справа? Пробовал установить разные значение padding для p и p img, но это не срабатывает, картинка уменьшается соответственно ширине текстового блока.

Comments

[Rustam Bainazarov]

Обожаю такие вопросы для гадания.

Ну попробуйте img { display: block; width: 100%; }

Answer 1

[EvgenyMorozov]

Вам нужно убрать обертку из тега Р вокруг IMG

Вот так например

function filter_ptags_on_images($content){
   return preg_replace('​/<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/p>/iU', '\1\2\3', $content);
}

add_filter('the_content', 'filter_ptags_on_images');

Answer 2

[Орхан Гасанлы]

Вот, пример - https://jsfiddle.net/kyjo7xta/2/

Comments

[Олег Степанов]

В wordpress это не работает, функция the_content() по умолчанию весь контент выводит внутри параграфа, и если для текста задать padding, он будет применён и к изображению.

[Орхан Гасанлы]

Олег Степанов, все работает. Только вы исходный код не предоставили для точности ответа. А так вам уже дали совет убрать тег р (абзац), который ВП автоматически добавляет

[Олег Степанов]

azerphoenix, да, надо было указать код, не подумал. С функцией убирающей тег p всё заработало.