[X] Помощник

[Kuchuluk Topic Starter]

Здравствуйте. Оптимизирую сайт под мобильные. В принципе всё норм, только столкнулся с такой проблемой, что при уменьшении окна браузера картинки не уменьшаются, они остаются в своем оригинальном размере, и появляется горизонтальный скролл. Я использую из бутстрапа только grid-сетку для оптимизации блоков. Кто хорошо разбирается в бутстрапе? Подскажите пожалуйста что еще подключить в бутстрапе чтобы работал класс img-responsive. Я подключаю только сетку. Либо может кто-нибудь знает как реализовать это без бутстрапа. Любой совет будет полезен.

[ixman]

Kuchuluk, задать css свойство max-width:100%

[Kuchuluk Topic Starter]

Ixman, да у меня там для больших экранов используется max-width в пикселях, потому что картинки по размеру большие, поэтому в процентах не получится 

[ixman]

Kuchuluk, если ширина в пикселях для блоков, в которых помещается картинка, то  max-width:100% указать именно для тега img то есть 

.block {
    max-width:640px
}

.block img {
    max-width:100%
}

[yury_mw]

Подскажите пожалуйста что еще подключить в бутстрапе чтобы работал класс img-responsive.

Чтобы работал класс img-responsive, достаточно его описать в css. См его стандартное описание в bootsrap:

.img-responsive {
display: block;
max-width: 100%;
height: auto;
}

Сообщение отредактировал yury - 30.8.2015, 13:04

[Kuchuluk Topic Starter]

Ixman, попробовал как показали вы, работает. Но тогда вопрос возникает - если картинки оборачивать в отдельный блок, это не скажется отрицательно на позициях статей в поисковиках, которые находятся в ТОП-е? Получается структура статьи меняется же немного.

И еще поправка, работает уменьшение картинок таким способом без появления скрола только в хромах, а в мозилле и в ie не работает. Для мозиллы и ie какие-то костыли надо прописывать?


Сообщение отредактировал Kuchuluk - 31.8.2015, 18:25

[ixman]

Kuchuluk, по поводу первого вопроса не думаю что, что то серьёзное произойдёт, но можно попробовать на 2 - 3 страницах и посмотреть на реакцию в течении нескольких апов выдачи.

По поводу второго вопроса ничего сказать не могу, нужно юзать поиск 

[Kuchuluk Topic Starter]

По поводу второго вопроса ничего сказать не могу, нужно юзать поиск

Заюзал, оказалось к классу .block помимо  max-width:640px нужно добавить еще width: 100%. В мозилле и IE теперь тоже заработало. Может кому пригодится на будущее. Только я не понял почему атрибуты width и max-width в одном классе не конфликтуют друг с другом.

Сообщение отредактировал Kuchuluk - 1.9.2015, 22:54

[ShowPrint]

не понял почему атрибуты width и max-width в одном классе не конфликтуют друг с другом

Kuchuluk, потому что это разные атрибуты, один "определяющий", а второй - "ограничивающий"... =)
Есть еще min-width, который тоже не будет конфликтовать с двумя упомянутыми (если не будет конфликта в значениях)...
На в переводе на русский язык эти стили "переводятся" как "во всю ширину, но не более 640 пикселей"... То есть нет повода для конфликта: пока ширина меньше 640px действует "определение", когда больше - "ограничение"...

Замечание модератора: Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней. Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой или обратитесь к любому из модераторов.