Этот вопрос парил меня реально многие годы =) В блоггере изображения вставляются неким скриптом, при этом можно довольно легко и просто выбрать один из четырех размеров (мелкий, средний, большой, оригинальный) и выравнивание - по левому или правому краям, или по центру. Вопрос был в том, как изменить эти, назовем их "пресеты", чтобы, к примеру, изображение можно было в один клик сделать в ширину блога.
Посмотрим как выглядят картинки, вставленные в мой основной блог.
Как можно видеть, изображение (в данном случае среднего размера) имеет по мимо всего прочего белую окантовку (сама картинка в оригинале кончается черной рамкой). Разумеется мне не пришло бы в голову растягивать во всю ширину именно эту - вертикальную картинку, но для горизонтальных иногда хочется это сделать. Убрав, заодно, ненужную белую рамку.
Собственно, что нужно сделать. Так как стили, применяемые на картинки, зависят от темы, то универсального решения, которое можно было бы скопипастить - нет. Однако его довольно просто получить, используя инструменты разработчика, которые сейчас есть в любом уважающем себя браузере. Например в хроме, который использую я.
Откроем
пост с картинкой. Если вы юзаете хром, то достаточно тыкнуть правой мышкой на картинку и выбрать "просмотр кода элемента", чтобы открыть такое окно (кликабельно):
Из полезного мы видим в первую очередь набор применяемых стилей справа. Из критичного в данном случае -
padding и
box-shadow, которые реализуют белую рамку и эффект тени. Эти стили нужно переназначить. Второе полезное - кусочек
width="289" в самом коде страницы. Это ширина, которая устанавливается при выборе средней ширины картинки при ее вставке. Скажу что для большого размера эта ширина равна
640, и именно ее я менял.
Собственно теперь мой стиль:
.post-body img[width="640"] {
padding: 0px!important;
box-shadow: 0px 0px 0px rgba(0, 0, 0, .5)!important;
width: 710px!important;
height: auto!important;
position: relative;
left: -34px;
}
Поясню. Первая строка обозначает элемент который мы будем менять - это тег
![]()
с классом "post_body" (его можно увидеть при исследовании стилей) и содержащий атрибут
width="640". То есть все стили, которые мы будем применять, будут распространяться только на картинки, для которых в редакторе, при вставке, мы выберем большой размер.
(Фактически мы таким образом можем задать аж 3 абсолютно разных стиля, "забиндив" их на 3 "пресетовых" размера.)
Дальше мы меняем свойство
padding - убирая внешние отступы от картинки и с ними - белую рамку.
Еще дальше мы убираем тень (
box-shadow), выставляя ее значения в нули.
Параметр
width - ширина, которая равна ширине моей колонки.
height: auto - высота устанавливается автоматически, так чтобы картинка не меняя пропорций.
position: relative - выставляем относительное позиционирование.... тут я приторможу и поясню...
Штука в том, что если посмотреть на мой бложик, на его центральную колонку, в котором расположены посты, то можно увидеть, что текст не прилегает вплотную к краям этой области. Иными словами для центральной области задан отступ, и если просто взять картинку, отключить ее отступы и выставить ширину равную ширине "постовой"! области блога, то картинка "съедет" вправо на ширину общего отступа колонки. Конечно можно убрать этот отступ вовсе, но тогда левый край текста будет также прилегать к границе колонки, что будет выглядеть убого. Поэтому для картинок и только для них нужно задать относительное смещение, и первый шаг для этого - параметр position: relative. А дальше добавляем...
left: -34px - методом проб и ошибок выясненное значение, при котором картинка ширины бложика ложится ровно по краям колонки.
Замечу, что в стиле я добавляю параметр !important, чтобы стиль перекрыл дефолтно заданные значения (вроде это необходимо только для параметров ширины и высоты, но другим параметров от этого дополнения хуже не будет)
И в завершение хочу сказать ,что таким образом "докопаться" можно не только до
картинок. Например я применяю подобный стиль для встраивания
слайдшоу пикасы.
