Перейти к содержимому


Пользователь месяца
TimurR TimurR 1-й за Август
Очков активности: 726 3 темы, 35 сообщений, 11 баллов репутации
ТОП самых активных за этот месяц
  • Фотография ShowPrint
    #1

    ShowPrint (ShowPrint.ru)
    Очков активности: 207 2 темы, 17 сообщений, 6 баллов репутации

  • Фотография Ixman
    #2

    Ixman (o5cat.ru)
    Очков активности: 105 0 тем, 10 сообщений, 7 баллов репутации

  • Фотография WGN
    #3

    WGN (worldgamenews.com)
    Очков активности: 84 Вне конкурса за определение пользователя месяца

  • Фотография magnet
    #4

    magnet (rbfxdirect.com)
    Очков активности: 67.5 Вне конкурса за определение пользователя месяца

  • Фотография TimurR
    #5

    TimurR
    Очков активности: 42 Вне конкурса за определение пользователя месяца

  • Фотография BLIK
    #6

    BLIK
    Очков активности: 39 Вне конкурса за определение пользователя месяца

  • Фотография AnnaYa
    #7

    AnnaYa (topbase.ru)
    Очков активности: 33 2 темы, 5 сообщений, 2 балла репутации

  • Фотография Developer
    #8

    Developer
    Очков активности: 33 2 темы, 16 сообщений, 1 балл репутации

  • Фотография Алексей111
    #9

    Алексей111
    Очков активности: 28.5 5 тем, 4 сообщения, 1 балл репутации

  • Фотография Игорь Ку
    #10

    Игорь Ку (dudesday.ru)
    Очков активности: 24 1 тема, 5 сообщений, 2 балла репутации

  • Показать весь ТОП 10

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 19.11.2017
  • Яндекс выдача: 24.09.2018
Топ 5 участников по репутации


Изменение размера картинки при уменьшении окна браузера

#1 Kuchuluk

Kuchuluk
  • Пользователь
  • 333 сообщений
  • Репутация: 5
0

Отправлено 29 August 2015 - 18:29

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


 

 

  • 0

#2 Ixman

Ixman
  • Пользователь PRO
  • 2882 сообщений
  • Репутация: 738

Отправлено 29 August 2015 - 20:21

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


  • 0


#3 Kuchuluk

Kuchuluk
    Topic Starter
  • Пользователь
  • 333 сообщений
  • Репутация: 5

Отправлено 30 August 2015 - 00:21

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


  • 0

#4 Ixman

Ixman
  • Пользователь PRO
  • 2882 сообщений
  • Репутация: 738

Отправлено 30 August 2015 - 11:02

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

.block {
    max-width:640px
}
.block img {
    max-width:100%
}

  • 0


#5 yury

yury
  • Пользователь
  • 642 сообщений
  • Репутация: 188

Отправлено 30 August 2015 - 12:04

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

 

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

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

Сообщение отредактировал yury: 30 August 2015 - 12:04

  • 1

#6 Kuchuluk

Kuchuluk
    Topic Starter
  • Пользователь
  • 333 сообщений
  • Репутация: 5

Отправлено 31 August 2015 - 15:23

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

 

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


Сообщение отредактировал Kuchuluk: 31 August 2015 - 17:25

  • 0

#7 Ixman

Ixman
  • Пользователь PRO
  • 2882 сообщений
  • Репутация: 738

Отправлено 31 August 2015 - 19:46

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

 

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


  • 2


#8 Kuchuluk

Kuchuluk
    Topic Starter
  • Пользователь
  • 333 сообщений
  • Репутация: 5

Отправлено 01 September 2015 - 21:54

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

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


Сообщение отредактировал Kuchuluk: 01 September 2015 - 21:54

  • 0

#9 ShowPrint

ShowPrint
  • Пользователь PRO
  • 3013 сообщений
  • Репутация: 814

Отправлено 02 September 2015 - 10:33

не понял почему атрибуты width и max-width в одном классе не конфликтуют друг с другом
@Kuchuluk, потому что это разные атрибуты, один "определяющий", а второй - "ограничивающий"... =)

Есть еще min-width, который тоже не будет конфликтовать с двумя упомянутыми (если не будет конфликта в значениях)...

На в переводе на русский язык эти стили "переводятся" как "во всю ширину, но не более 640 пикселей"... То есть нет повода для конфликта: пока ширина меньше 640px действует "определение", когда больше - "ограничение"...


  • 2
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


robot

robot
  • Пользователь PRO
  • 2652 сообщений
  • Репутация: 85


Похожие темы

  Название темы Автор Статистика Последнее сообщение

Оформление форума – IPBSkins.ru