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

Question

I am trying to modify an existing page that I inherited - the page is using Bootstrap 3.3.7

The page generates HTML dynamically (the image URLs are being read from a database and the height and width of the images may be different) to display a list of images - sample HTML generated is shown below:

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

The images are currently responsive, but I would like the images to display at a fixed height and width when the screen width is less than or equal to 768px. I know I need a media query of some type, but no matter what I try, I cannot seem to get the images to render with a fixed height on screens less than 768px.

Any advice / tips would be appreciated.

Answer 1

Have you tried something like that, you will need to change the width and heights

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