Размер картинки blogger увеличить на ширину страницы

Если вы делаете блог на blogger, не знаете язык программирования и пользуетесь только функциями, предоставляемыми блоггером, то вставленная в статью иллюстрация может быть только определенных размеров - маленький, средний, крупный, очень крупный и исходный (выбрать размер можно, если щелкнуть на иллюстрации):

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

Чтобы было проще искать в коде фрагмент с фото в blogger, заранее пропишите Свойства фотографии - alt блоггер:
Свойства фото в блоггер
alt фото в блоггер

Во время редактирования статьи нажимаем кнопку HTML:



Откроется окно с кодом. Для поиска надо нажать Ctrl+F и в появившемся окне ввести тот текст, который вы написали в Свойстве фото:


"img alt" перед искомым текстом в переводе на русский означает "альтернативный текст изображения". Ищем ширину (width) нашего фото - у меня она равна 320: width="320". Будьте внимательны и не измените случайно ширину исходного изображения (data-original-width). Ширина моей страницы 630 пикселей. Если мне нужно фото на ширину страницы я ставлю его ширину 550 - для этого надо заменить 320 на 550. Но это еще не все, нужно полностью удалить высоту фото (height), иначе оно станет непропорциональным - удаляем текст height="210" (естественно, у вас будут другие цифры). Получаем:


Но как же узнать, какой ширины у вас страница? Это несложно и, скорее всего, вы это уже знаете. Заходим по стрелкам:


У меня в блоге 2 колонки. Чтобы узнать ширину средней колонки, нужно вычесть из ширины всего блога ширину левой и правой боковых панелей: 1100 - 230 - 240 = 630. Затем опытным путем найти такую ширину фотографии, которая бы вам нравилась. Мне нравится 550.


Вот так выглядит на моей странице иллюстрация шириной 550 пикселей:

Кошка с котенком


Не забудьте подписаться на мою Facebook страничку









2 комментария:

Все статьи сайта