jQueryWEBWordPressWordPress - jQuery

WordPress – автоматически удаляем высоту (height) изображений благодаря jQuery

WordPress - автоматически удаляем высоту (height) изображений благодаря jQuery

height — css атрибут изображения указывающий высоту картинки, данный атрибут весьма полезен, но вместе с атрибутом wedith (ширина изображения на блоге)  растягивает или стягивает картинку на мобильных устройствах. В этой статье пойдет речь о том как удалить атрибут высоты из всех изображений сайта не прибегая к ручному удалению.

Для чего нужен скрипт:

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

Скрипт:

Для адекватного отображения уже имеющихся картинок на сайте нам придет на помощь данный скрипт:

<!--Remove height in to image--> <script src="//code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> jQuery.noConflict(); jQuery(document).ready(function($){ $('img').each(function(){ $(this).removeAttr('height'); }); }); </script> <!--END--Remove height in to image-->

Что делает скрипт:

Скрипт удаляет из изображений атрибут высоты (height), оставляя атрибут ширины (wedith) за счет чего картинка будет отображаться красиво и в нормальном размере на любых устройствах.

Данный скрипт необходимо установить в файл header.php  сразу после открывающегося тега <head>.

Ка выглядит картинка по умолчанию на блоге при просмотре записи блога на мобильном телефоне:

WordPress - автоматически удаляем высоту (height) изображений благодаря jQuery

Вот как выглядит картинка после применения скрипта:

WordPress - автоматически удаляем высоту (height) изображений благодаря jQuery

Скрипт оригинал находится здесь (удаляет и высоту и ширину): http://wpwizard.net/jquery/remove-img-height-and-width-with-jquery/

Источник записи: https://mediadoma.com

Похожие сообщения
WordPressПлагиныПолезные сайты

40 полезных инструментов для управления и развития вашего блога (обновлено)

ElementorWordPressПлагины

Elementor - Как создать мега меню с помощью дополнений Elementor и Plus

WordPressWordPress темы

20+ лучших женских тем WordPress 2020

WordPress

Как исправить ошибку загрузки изображения WordPress