在小屏幕上将响应式图像设置为固定的高度和宽度

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>

图像目前是响应式的，但我希望当屏幕宽度小于或等于 768px 时，图像以固定的高度和宽度显示。我知道我需要某种类型的媒体查询，但无论我尝试什么，我似乎都无法让图像在小于 768px 的屏幕上以固定高度渲染。

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

Answer 1

您是否尝试过这样的事情，您将需要更改宽度和高度

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

Answer 2

感谢@LCarter - 让我朝着正确的方向前进......

由于该站点在各个页面上使用 img 响应类，并且我不想覆盖所有页面上的行为，因此我创建了以下内容：

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

效果很好 - 再次感谢！