Css 使用小屏幕尺寸时，将响应图像设置为固定高度和宽度

我正在尝试修改继承的现有页面-该页面正在使用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>

此处的文本内容
此处的文本内容

图像当前响应良好，但我希望在屏幕宽度小于或等于768px时，图像以固定的高度和宽度显示。我知道我需要某种类型的媒体查询，但不管我怎么做，我似乎都无法在低于768px的屏幕上以固定高度渲染图像

---

任何建议/提示都将不胜感激。

如果您尝试过类似的方法，您将需要更改宽度和高度

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

感谢@LCarter——让我走上了正确的方向

因为站点在各个页面上使用img responsive类，我不想覆盖所有页面上的行为，所以我创建了以下内容：

.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;
  }
}

工作很好-再次感谢