как установить автоматический размер изображения в Blogger

Доброго времени суток, друзья. Блоггер нам предоставил удобный редактор для работы с изображениями в блоге. Инструмент позволяет загружать и изменять размеры нужных картинок в один клик, в зависимости от типа содержания.

После установки есть опции определиться с размером - маленький, средний, крупный, очень крупный и исходный. Однако, бывают случаи, когда возникает желание загрузить картинку и сделать её на всю ширину колонки. Если вы будете устанавливать изображение маленького размера и задавать ему значение "очень крупный", то оно несомненно потеряет качество.

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

Предлагаю простой и оптимальный вариант. Допустим, у меня картинка размером 1366 × 768 px.  При этом, когда я сделаю ей размер "исходный", она в сообщении будет обрезана, вот как - то так (это скриншот).

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

Посмотрите на этом тестовом блоге в идеале. Там у меня ещё отдельно эффект добавлен, но это к данной теме не относится.

Демонстрация

Как сделать автоматическое изменение размера картинки в Bloggere.

Не переживайте, эффект будет применён только к тем картинкам, которые вы сами захотите так показать. С остальными будет всё, как обычно. Сначала нужно убедиться что изображение шириной больше 640 px. Затем зайти во вкладку тема и найти строку ]]></b:skin>. Сразу перед ней установить вот этот небольшой код.

.post-body img {
max-width: 100%;
max-height: auto;
display: block;
margin: auto;
}

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

Можно ещё добавить некоторые стили, которые уберут какие - то рамки, тени  или границы у картинки, что придаст более интересное отображение. Я отметила их зелёным цветом. Код будет выглядеть уже так. 

.post-body img
{  max-width: 100%;
max-height: auto;
display: block;
margin: auto;  box-shadow: none;
padding: 0px;  }

Если посмотреть код сейчас в режиме HTML можно увидеть следующее. 

<a href="https://1366x768.ru/children/6/children-wallpaper-1366x768.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="450" data-original-width="800" src="https://1366x768.ru/children/6/children-wallpaper-1366x768.jpg" /></a>

Размеры с 1366x768 стали 450 на 800 и изображение встало на всю ширину поля с сохранением качества. Как я писала уже выше, нужно обязательно при выборе размера нажать на функцию "исходный размер". Естественно не стоит его располагать слева или справа. В любом случае они автоматически отобразятся в полную ширину.

Такие картинки на странице смотрятся очень стильно.

Примечание - этот вариант отобразит только те картинки, которым задан параметр "исходный размер". Если нужно это применить ко всем фотографиям (разных размеров), добавленных в ваши посты, то код будет такой

.post-body img {
width: 100%;
высота: 100%;
display: block;
}

Пробуйте. Такой вариант с автоматическим изменением размера картинок гораздо удобнее, качественнее и элегантнее.

P.S. Чтобы пост отдельный не писать, поделюсь, как сделать эффект переливающихся картинок. Это именно то, что вы могли видеть на тестовом блоге по ссылке в начале статьи. При наведении курсора на изображение идёт изменение цвета. Радужные картинки можно применить на какой - то праздник. Для игровых или детских блогах, как дополнение к дизайну.

Совершенно маленькая строка кода позволяет этого добиться. Так же во вкладке Тема перед строкой ]></b:skin> устанавливаем вот такую строчку и сохраняем шаблон.

@-webkit-keyframes hue{100%{-webkit-filter:hue-rotate(360deg)}}img:hover{-webkit-animation:hue 1s linear infinite}

Вот, пожалуй и всё. Спасибо за внимание.

Получайте новые сообщения с блога прямо на почту

Введите Ваш email