Как адаптивные изображения на мобильных устройствах?

Question

[Zempik]

Сделал сайт на bootstrap. Всё идеально на телефоне смотрится, а вот с большими изображениями проблема. Как их адаптировать по экран? Много страниц с такими большими изображениями, поэтому нужен универсальный вариант. Кто-нибудь сталкивался с такой проблемой?
Это пример сайта на мобильном:

Answer 1

[Zempik]

Всё. Вопрос решен. Добавил в стили:

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

Answer 2

[codemix]

class="img-responsive" пробовали?

Comments

[Zempik]

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

[codemix]

Если необходимо сделать адаптивными сразу все изображения, расположенные на странице или в некотором блоке, то для этого необходимо воспользоваться одним из нижепредставленных правил CSS:

/* 1 Способ - Придать адаптивность всем изображениям. При этом данные изображения будут себя ввести как строчно-блочные элементы (inline-block) */
img {
display: inline-block;
height: auto;
max-width: 100%;
}
/* 2 Способ - Придать адаптивность всем изображениям. При этом данные изображения будут себя ввести как блочные элементы (block) */
img {
display: block;
height: auto;
max-width: 100%;
}
/* 3 Способ - Придать адаптивность всем изображениям, расположенных в элементе с id="main". При этом данные изображения будут себя ввести как блочные элементы (block) */
#main img {
display: block;
height: auto;
max-width: 100%;
}