在小屏幕尺寸下将响应图像设置为固定的高度和宽度

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