Изображения становятся больше определенного размера и выходят за рамки

Question

Я использую bootstrap, чтобы создать страницу html, где я показываю список изображений. Но некоторые изображения показывают больше, и последнее изображение иногда выходит из моего основного контейнера div. Кроме того, если я уменьшу размер браузера, то в какой-то момент некоторые элементы будут перекрываться. Как мне это решить?

Мой css:

* { arial, sans-serif !important;   }

body{  padding-top: 50px;    }

img.img-thumb{
    height: 180px;
    width: auto;    }

Мой html:

вот ссылка: https://jsfiddle.net/rashed007/xeukaqr4/1/

Одно решение, которое я нашел, состоит в том, что вместо определения ширины изображения я могу сказать max-width: 100%;

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

img.img-thumb{
    height: 180px;
    width: auto;
    max-width:100%;
    max-height:100%;
}

и если я воспользуюсь приведенным ниже, то изображения получатся разных размеров:

 img.img-thumb{
max-width:100%;
max-height:100%;
}

Как правильно это сделать?

Answer 1

Поскольку вы используете BS3, присвойте изображениям класс img-responsive и удалите добавленные вами атрибуты max- *. Это встроенный класс BS3 , который устанавливает максимальную ширину равной 100%, а высота будет регулироваться автоматически в соответствии с внутренним соотношением c вашего изображения.