Bootstrap and responsive images

0
votes

I am using .img-responsive class inside img tag. The image is quite small (42K) but when the page is loaded, the image shows multiple seconds as quite big until it shrinks to fit the size of the element holding it.

How should I deal with responsive elements with bootstrap?

1
htmlcsstwitter-bootstrap
Could you reproduce your issue in a jsfiddle? – abl
Using img-responsive won't cause your image to do that, do you have some other code interfering? – DavidG
Sounds like your CSS is taking a while to load – James King
Sounds like what @JamesKing said without any code to see. If it's a big issue you could load the assets before displaying the page. – TheLimeTrees

1 Answers

1
votes

This problem happens when your library code (for example grid system) load late, and your 'IMG' tag probably has the following css:

sass

#yourIMG
     display:block
     max-width:100%
     height: auto
     width: 100% /*this one is your problem*/

and the width:100% make your img full width before your grid system load, you can either remove/overwrite that css or load your grid system code earlier

Note: grid system , in here can be any file or css which control your img parent tag width