CODEWITHSUNDEEP
twitter-bootstrap
vijar
vijar

Reputation: 781

How to stop images from becoming blurry in bootstrap responsive design ?/

the bootstrap-responsive.css adds max-width:100% to all .img tags. Because of this my images are getting blurr. If i remove this the images are super clear but not responsive anymore. Is there a way i can have responsive images (i.e resize on their own) and still have them clear and not blurry

Upvotes: 3

Views: 8689

Answers (2)

Sarah
Sarah

Reputation: 1

I've solved this issue by placing a max-width on the outer container of the image to the images dimensions.

.outer-image-container { 
    max-width: 500px;
}

The HTML would be as follows:

<div class="outer-image-container">
     <img src="image.png" class="img-responsive" />
</div>

Hope this helps a bit. It keeps my image responsive without blurring it out.

Upvotes: 0

Diesel337
Diesel337

Reputation: 66

You need to override the max-width setting by adding a class to your images that you do not want to re-size when scaling the browser.

    .fixed_width {
      height: 32px;
      width: 32px;
      max-height: 32px;
      max-width: 32px;
     }

    <img class="fixed_width" alt="{{item.Name}}" ng-src="Images/{{item.ImageUrl}}" />

Upvotes: 1

Related Questions