Bootstrap 2 реагирующие изображения

Question

Я унаследовал веб-сайт, где используется самозагрузки 2 наценка но изображения имеют ширину HTML установить следующим образом:

<img src="text.jpg" alt="blog" width="525" height="379"> 

Так что, когда эта страница снижается до планшета просмотра изображений прорвать структуру столбца/сетки и не изменять размер.

Есть ли класс или что-то, что я могу использовать, чтобы сделать эти изображения отзывчивыми?

Большое спасибо

Answer 1

Вы можете добавить следующие стили к изображениям:

img { 
    display: block; 
    max-width: 100%; // Set a maximum relative to the parent 
    height: auto; // Scale the height according to the width, otherwise you get stretching 
} 

Или создать .img реагирующего класса и добавить к изображениям:

.img-responsive { 
    display: block; 
    max-width: 100%; // Set a maximum relative to the parent 
    height: auto; // Scale the height according to the width, otherwise you get stretching 
} 

Это также работает, не снимая ширину и высота:

<img src="text.jpg" alt="blog" width="525" height="379" class="img-responsive"> 

Answer 2

Удалить width="525" height="379" и попытаться положить% значения. В этом проблема.

Answer 3

Я только что понял, что эти изображения имеют стиль css, который был переопределяющим bootstra п.

Так они подхватили этот:

max-width:520px; 

Вместо бутстрэпами:

max-width:100%; 

Это не имеет ничего общего с действующим стилем, как я сначала думал.