Шорткод для вставки изображений, автоматически подстраивающихся под ширину окна браузера

Сейчас в моде так называемые responsive-темы. Точного слова, полностью передающего смысл технического английского термина responsive нет, и я испольную свой – отзывчивые. Подобные темы отзывчивы к изменениям ширины окна браузера, в котором их просматривают – при растягивании или сужении окна браузера они автоматически изменяют ширину, корректно располагая содержимое таким образом, чтобы все помещалось на странице, не образовывались горизонтальные полосы прокрутки, видео и изображения уменьшались и увеличивались пропорционально, не искажая восприятие.

Специально для создания отзывчивого в изменениям размеров, гибкого дизайна были придуманы специальные элементы CSS-разметки, описывающие поведение HTML-элементов на страницах, просматриваемых на экранах с определенной шириной. Давайте создадим шорткод, позволяющий публиковать изображения, обладающие отзывчивой шириной (автоматически подстраивающиеся под изменение ширины браузера, в котором просматривается сайт).

Для создания шорткода нужно вставить нижеприведенный код в файл functions.php:

function responsive_images($atts, $content = null) {
     return '<div class="image-resized">' . $content .'</div>';
}
add_shortcode('responsive', 'responsive_images');

В этом шорткоде мы помещаем изображение в элемент DIV класса image-resized. Теперь нужно описать этот класс в файле style.css:

.image-resized img {
        width:100%;
        height:auto;
    }

@media only screen and (max-width:767px) {
    .image-resized img {
        width:100%;
        height:auto;
    }
}

/* экраны шириной 240px */
@media only screen and (max-width: 319px) {
    .image-resized img {
        width:240px;
        height:auto;
    }
}
 
/* экраны шириной 320px */
@media only screen and (min-width: 320px) and (max-width: 479px) {
    .image-resized img {
        width:320px;
        height:auto;
    }
}
 
/* экраны шириной 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .image-resized img {
        width:480px;
        height:auto;
    }
}

Задаются несколько параметров, указывающих изображению автоматически сужаться до размеров экрана устройства, на котором они просматриваются. Таким образом можно добиться автоматического уменьшения ширины изображения без нарушения пропорциональности и выхода изображения за пределы экрана.

Так как у шорткода нет дополнительных аргументов, то использовать его очень легко:

[responsive][/responsive]