The problem is not with your images. It's with the rest of your layout. You have a fixed width wrapper to begin with. For an image to resize it needs to be inside of a fluid layout. Because you do not have a fluid base, media will not resize because all other elements do not resize because they have set pixel widths.
Let me see if i got it. because my layout is fixed first it takes the fullwidth of my wrapper and based on that it resizes the images. When it full loads takes the media queries stuff and mades the changes.
But when i load the website it show's the full size of the image, after full site download it fits the div's size.
Im using this too in the header area:
Here you can see it: http://clientes.web507.com/rdtest/motos.php
what could be wrong in my way of doing?
article on fluid grids
article about responsive web design but more importantly having a fluid base
#promos .promoto figure, #listamotos .promoto figure {width: 100px;
text-align: center;
float: left;
margin-left: 0;
margin-right: 15px;
}
The key here is the-
width : 100px
your site will not be responsive with fixed width elements. media queries are only a part of making a site responsive.