Установите адаптивное изображение на фиксированную высоту и ширину при работе на экране небольшого размера

Question

Я пытаюсь изменить существующую страницу, которую я унаследовал - страница использует Bootstrap 3.3.7

Страница генерирует HTML динамически (URL-адреса изображений чтение из базы данных, а высота и ширина изображений могут различаться) для отображения списка изображений - образец HTML сгенерирован показан ниже:

<div class="row">
<div class="col-xs-4 text-center">
<img src="..." height="900" width="1200" class="img-responsive center-block">
</div>
<div class="col-xs-8">
text content here
</div>
</div>
<div class="row">
<div class="col-xs-4 text-center">
<img src="..." height="640" width="640" class="img-responsive center-block">
</div>
<div class="col-xs-8">
text content here
</div>
</div>

Изображения в настоящее время реагируют, но я бы как изображения для отображения на фиксированной высоте и ширине, когда ширина экрана меньше или равна 768 пикселей. Я знаю, что мне нужен медиа-запрос какого-то типа, но независимо от того, что я пытаюсь, я не могу заставить изображения отображаться с фиксированной высотой на экранах менее 768 пикселей.

Буду признателен за любые советы .

Answer 1

Благодаря @LCarter - отправил меня в правильном направлении ...

Поскольку сайт использовал img-responseive класс на разных страницах, и я не хотел переопределять поведение на всех страницах, поэтому я создал следующее:

.img_responsive_fixed_small {
  display: block;
  max-width: 100%;
  height: auto;
}
@media only screen and (max-width: 768px) {
  .img_responsive_fixed_small {
    max-width: 140px;
    max-height: 140px;
  }
}

отлично работает - еще раз спасибо!

Answer 2

Вы пробовали что-то подобное, вам нужно изменить ширину и высоту

@media only screen and (max-width: 768px) {
  .img-responsive {
    max-width: 300px;
    max-height: 300px;
  }
}