Заметки о Wordpress
Короткие заметки о настройке системы Wordpress для получения дополнительного функционала.

Как сделать все изображения на блоге Wordpress адаптивными

/ Просмотров: 1288

Адаптивные изображения могут быть большими на широких экранах и автоматически уменьшаться при просмотре содержимого на мобильных устройствах. Сделать картинки на вашем блоге такими очень просто.

Сначала создаем короткий код. Копируем ниже приведенную функцию в файл functions.php вашей темы:

function responsive_images($atts, $content = null) {
     return '<div class="image-resized">' . $content .'</div>';
}
 
add_shortcode('responsive', 'responsive_images');
[/php]
Затем добавляем следующие правила в файл <i><b>style.css</b></i> темы:
[pre lang=css]
@media only screen and (max-width:767px) {
    .image-resized img {
        width:100%;
        height:auto;
    }
}

И можно использовать короткий код [responsive] в тексте ваших заметок и статей для вставки адаптивных изображений:

[responsive]<img src="image_url" alt="alt" title="title" />[/responsive]
Оставьте комментарий!

grin LOL cheese smile wink smirk rolleyes confused surprised big surprise tongue laugh tongue rolleye tongue wink raspberry blank stare long face ohh grrr gulp oh oh downer red face sick shut eye hmmm mad angry zipper kiss shock cool smile cool smirk cool grin cool hmm cool mad cool cheese vampire snake excaim question

Используйте нормальные имена

Вы можете войти под своим логином или зарегистрироваться на сайте.

Авторизация 

(обязательно)