CODEWITHSUNDEEP
csstwitter-bootstrapresponsive-images
bdcoder
bdcoder

Reputation: 3781

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

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.

Upvotes: 1

Views: 1928

Answers (2)

bdcoder
bdcoder

Reputation: 3781

Thanks to @LCarter -- sent me in the right direction...

Because the site was using the img-responsive class on various pages and I did not want to override the behavior on all pages, so I created the following:

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

works great - thanks again!

Upvotes: 0

LCarter
LCarter

Reputation: 26

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

Upvotes: 1

Related Questions