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

Реферальная программа Мегаплана


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

#1 Kuchuluk

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

Отправлено 29 Август 2015 - 18:29

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


 

 

  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Загрузка картинки с последющим тройным изменением размера
  2. Как вписать изображение в размер окна браузера при помощи html/css
  3. Массовая оптимизация картинок — уменьшение размера без потери качества

#2 Ixman

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

Отправлено 29 Август 2015 - 20:21

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


  • 0

#3 Kuchuluk

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

Отправлено 30 Август 2015 - 00:21

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


  • 0

#4 Ixman

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

Отправлено 30 Август 2015 - 11:02

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

.block {
    max-width:640px
}

.block img {
    max-width:100%
}

  • 0

#5 yury

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

Отправлено 30 Август 2015 - 12:04

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

 

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

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

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

  • 1

#6 Kuchuluk

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

Отправлено 31 Август 2015 - 15:23

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

 

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


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

  • 0

#7 Ixman

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

Отправлено 31 Август 2015 - 19:46

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

 

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


  • 2

#8 Kuchuluk

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

Отправлено 01 Сентябрь 2015 - 21:54

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

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


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

  • 0

#9 ShowPrint

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

Отправлено 02 Сентябрь 2015 - 10:33

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

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

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


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


robot

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


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