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

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 时，图片以固定的高度和宽度显示。我知道我需要某种类型的媒体查询，但无论我尝试什么，我似乎都无法让图像在小于 768 像素的屏幕上以固定高度呈现。

如有任何建议/提示，我们将不胜感激。

Answer 1

您是否尝试过类似的操作，您将需要更改宽度和高度

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

Answer 2

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

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

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

效果很好 - 再次感谢！

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

Set responsive image to fixed height and width when on small screen sizes

css

twitter-bootstrap

responsive-images